注册表单的实现思想及步骤
- 明确自己需要收集的注册信息并在Html上写出表单的布局
- 在js上进行数据接收和验证，向服务器发起注册请求，处理请求返回的数据。
代码实现
html代码
<form><div><span>用户名：</span><input type="text" id="username"/><span class="tishi">长度为4~20个字符，支持汉字，字母，数字及"-","_"组合</span></div><div><span>设置密码：</span><input type="password" id="password" /><span class="tishi">6~20个字符，建议由字母，数字构成的组合</span></div><div><span>确认密码：</span><input type="password" id="passwords"/><span class="tishi">请再次输入密码</span></div><div><span>性别：</span><input type="radio" name="sex" value="男"/><strong>男</strong><input type="radio" name="sex" value="女" /><strong>女</strong></div><div><span>邮箱：</span><input type="text" id="email" ><span class="tishi"></span></div><input type="button" value="立即注册" id="submit"/></form>
css代码
input{margin: 0;padding: 0;display: block;border: none;
}form{width: 515px;height: 580px;float: left;font-size: 16px;color: #cecece;line-height: 40px;
}form input{width: 300px;height: 40px;border: 1px solid #cecece;float: left;
}
form span{display: block;height: 40px;float: left;
}
form div{height: 40px;width: 900px;float: left;margin: 13px 0;padding-left: 50px;
}
form div:nth-of-type(1){padding-left: 115px;
}
form div:nth-of-type(2){padding-left: 100px;
}
form div:nth-of-type(3){padding-left: 100px;
}
form div:nth-of-type(4){padding-left: 131px;
}
form div:nth-of-type(4) input{width:15px;height: 15px;line-height: 40px;margin-top: 14px;margin-right: 5px;
}
strong{display: block;height: 40px;width:20px;font-size: 16px;float: left;line-height: 40px;
}
form div:nth-of-type(5){padding-left: 131px;
}
form #submit{background: #ff5757;color: #fff;margin-left: 180px;margin-top: 20px;
}
form .tishi{height: 40px;display: none; /*将提示信息默认隐藏*/float: left;border: 1px solid #cecece;color: #cecece;line-height: 40px;font-size: 12px;position: relative;background: #fff;z-index: 3;
}js代码
$(
function(){
//标记各个内容是否填写var Name = 0;var Word = 0;var Words = 0;var Emails = 0;var Sexs = 0;// 用户名验证//表单获得焦点时显示提示信息$("#username").on("focus",function(){$(".tishi").eq(0).css("display","block");});//表单信息改变并失去焦点时执行$("#username").on("change",function(){var vals = $("#username").val();if(vals.length<4||vals.length>20){$(".tishi").eq(0).html("用户名长度只能在4~20个字符之间").css("color","#f00");//进行长度验证}else{//使用ajax请求接口进行用户名重复验证$.ajax({type:"get",url:" ",data:{"username":vals},success:function(data){if(data.code==0){$(".tishi").eq(0).html("用户名已经被使用").css("color","#f00");}else{$(".tishi").eq(0).html("用户名可用").css("color","#0f0");Name++; //验证成功Name+1}}});}});//密码验证$("#password").on("focus",function(){$(".tishi").eq(1).css("display","block");});//文本框内容改变时进行验证$("#password").on("input",function(){let a = $("#password").val();let rega =/\D/;//验证密码是否为纯数字的正则if(a.length<6||a.length>20){//验证长度$(".tishi").eq(1).html("长度应为6~20个字符").css("color","#f00");}else if(!rega.test(a)){$(".tishi").eq(1).html("密码不能为纯数字").css("color","#f00");}else{$(".tishi").eq(1).html("密码可用").css("color","#0f0");Word++;//密码可用Word++}});//密码一致验证$("#passwords").on("focus",function(){$(".tishi").eq(2).css("display","block");});$("#passwords").on("change",function(){let a = $("#password").val();let b = $("#passwords").val();if(b!= a){$(".tishi").eq(2).html("两次输入密码不一致").css("color","#f00");}else{$(".tishi").eq(2).html("密码一致").css("color","#0f0");Words++;//两次密码一致Words++}});//邮箱验证$("#email").on("change",function(){let a = $("#email").val();let tage = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;//邮箱格式验证的正则var flag = tage.test(a);if(!flag){$(".tishi").eq(3).css({"display":"block","color":"#f00"}).html("邮箱格式不正确");}else{$(".tishi").eq(3).css({"display":"block","color":"#0f0"}).html("邮箱可用");Emails++;//邮箱可用时Emails++};});//性别的验证$("input[name='sex']").on("change",function(){Sexs++;//选择性别Sexs++});//哪一项不合格弹出对应的信息$("#submit").on("click",function(){if(!Name){alert("请输入正确的用户名");}if(!Word){alert("请输入正确的密码")}if(!Words){alert("两次密码不一致")}if(!Emails){alert("请输入正确的邮箱");}if(!Sexs){alert("请选择性别");}//所有项都符合要求时请求接口进行注册if(Name&Word&Words&Emails&Sexs){var userName = $("#username").val();//获取用户名var passWord = $("#password").val();//获取密码var Email = $("#email").val();//获取邮箱var sex = $("input[name='sex']:checked").val();//获取性别$.ajax({type:"POST",url:" ",data:{'username':userName,'password':passWord,'email':Email,'sex':sex},success:function(data){if(data.msg=="成功"){alert("注册成功");}else{alert("注册失败");}}});}});
});
运行截图
Ajax的使用
$.ajax({type:" ", //请求方式url:" "， //请求的地址data:{}， //请求时所需的参数success:function(da){ //参数为返回的数据}
});
注: 本注册表单使用了jQuery，需要提前引入
