1.效果
2.代码
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8"> <title>JQ校验表单</title> <script src="../js/jquery-3.2.1.js"></script> <script> $(function() { //1.对账号进行校验 $("#loginID").focus(function() { //1.1 提醒用户谨慎填写 当输入框里面输入了内容后提醒消失 拿到输入框的内容看看是否是空的 空的提示 不空提示消失 var val = $("#loginID").val(); if(val == '') { $("#loginInfo").html("<font style='color: red;'>请谨慎填写！</font>"); }//1.2 当用户没有输入任何内容就告诉他需要填写，校验账号长度 如果 小于6位 或者大于12位 就提示它 最后要去后台校验是否该账号已经被注册了 发出ajax请求 将得到的值进行判断
$("#loginID").blur(function() { var len = $("#loginID").val().length; //拿到用户输入的内容长度 if(len < 6 || len > 12) { if(len == 0) { $("#loginInfo").html("<font style='color: red;'>账号未输入！</font>"); } else { $("#loginInfo").html("<font style='color: red;'>账号长度6--12位</font>"); }} else {
//这里应该是ajax请求 如果 后台传回的标记是未注册 //$("#loginInfo").html(""); //否则 提醒他已经注册 $("#loginInfo").html(""); //这里就不去校验后台了 } });});
//2.对密码进行校验 长度至少6位
$("#pwd").blur(function() { var plen = $("#pwd").val().length; if(plen < 6) { if(plen == 0) { $("#pwdInfo").html("<font style='color: red;'>密码不能为空！</font>") } else { $("#pwdInfo").html("<font style='color: red;'>密码至少6位！</font>"); }} else {
$("#pwdInfo").html(""); } }); //3.确认密码 要求与密码的内容相同 $("#rpwd").blur(function() { var oldpwd = $("#pwd").val(); var newpwd = $("#rpwd").val(); if(oldpwd != newpwd) { $("#rpwdInfo").html("<font style='color: red;'>密码不一致！</font>"); } else { $("#rpwdInfo").html(""); } }); //4.姓名 非空校验 required="required" 在html里校验 //5.年龄校验 只能是数字 不能小于 0 且不能大于120 $("#age").keypress(function(e) { var keynum var keychar var numcheckif(window.event) // IE
{ keynum = e.keyCode } else if(e.which) // Netscape/Firefox/Opera { keynum = e.which } keychar = String.fromCharCode(keynum) numcheck = /\d/ //数字的正则表达式 return numcheck.test(keychar) // !numcheck.test(keychar) 表示不能输入数字了 }); //大于0 小于120 $("#age").blur(function() { var valAge = $("#age").val(); if(valAge < 0 || valAge > 120) { $("#ageInfo").html("<font style='color: red;'>年龄必须在0---120之间</font>"); } else { $("#ageInfo").html(""); } }); //6. 省市二级联动 //6.1定义一个二维数组 存放 城市 var cities = new Array(); cities[0] = new Array("朝阳区", "海淀区", "昌平区"); cities[1] = new Array("浦东区", "虹口区", "金山区"); cities[2] = new Array("福田区", "罗湖区", "坪山区"); $("#provice").change(function() { //6.2拿到用户选择的省份 var pro = $(this).val(); var citys = cities[pro]; //清空市下拉框内容原来的内容 将城市数组进行遍历 追加到 市选择框 var cityElement = $("#city")[0] //转化为JS对象 cityElement.length = 0; //清空城市下拉框 $(citys).each(function(index, name) { //alert(index+"---"+name)//遍历拿到选择省份下面的城市的索引 及值 $("#city").append("<option value='" + index + "'>" + name + "</option>") }) }); //7.校验电话号码 $("#telephone").blur(function(){ var telephoneVal = $("#telephone").val(); if(!(/^1[34578]\d{9}$/.test(telephoneVal))){ $("#telephoneInfo").html("<font style='color: red;'>手机号格式不正确！</font>"); }else{ $("#telephoneInfo").html(""); } }); //8.邮箱校验 使用html5自带的就行 //9.身份证号码正确性校验 $("#PersonID").blur(function(){ var personid = $("#PersonID").val(); if(!/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(personid)){ $("#PersonIDInfo").html("<font style='color: red;'>身份证格式错误！</font>"); }else{ $("#PersonIDInfo").html(""); } });});
</script> </head><body>
<form action="#" method="post"> <table align="center" border="0px"> <caption>注册页面</caption> <!--1.账号--> <tr> <td align="right">账号：</td> <td> <input type="text" name="loginID" id="loginID" /> <span id="loginInfo"></span> </td> </tr> <!-- 2.密码 --> <tr> <td align="right">密码：</td> <td> <input type="password" name="pwd" id="pwd" /><span id="pwdInfo"></span> </td> </tr> <!--3.确认密码--> <tr> <td>确认密码：</td> <td> <input type="password" name="rpwd" id="rpwd" /><span id="rpwdInfo"></span> </td> </tr> <!-- 4.姓名--> <tr> <td align="right">姓名：</td> <td> <input type="text" name="name" id="name" required="required" /> </td> </tr> <!-- 5.年龄--> <tr> <td align="right">年龄：</td> <td> <input type="text" name="age" id="age" /><span id="ageInfo"></span> </td> </tr> <!--6.性别--> <tr> <td align="right">性别：</td> <td> <input type="radio" name="sex" value="0" checked="checked" />男 <input type="radio" name="sex" value="1" />女 </td> </tr> <!-- 7.爱好--> <tr> <td align="right">爱好：</td> <td> <input type="checkbox" name="habby" value="0" checked="checked" />阅读 <input type="checkbox" name="habby" value="1" />运动 <input type="checkbox" name="habby" value="2" />玩游戏 <input type="checkbox" name="habby" value="3" />爬山 </td></tr>
<!--8.籍贯--> <tr> <td align="right">籍贯：</td> <td> <select id="provice"> <option value="0">北京</option> <option value="1">上海</option> <option value="2">深圳</option> </select> <select id="city"></select>
</td> </tr> <!--9.电话--> <tr> <td align="right">电话：</td> <td> <input type="text" name="telephone" id="telephone" required="required"/><span id="telephoneInfo"></span> </td> </tr> <!--10.出生年月--> <tr> <td align="right">出生年月：</td> <td> <input type="date" name="date" id="date" /> </td> </tr> <!--11.个人近照--> <tr> <td align="right">个人近照：</td> <td> <input type="file" name="photo" id="photo" /> </td> </tr> <!--12.邮箱--> <tr> <td align="right">邮箱：</td> <td> <input type="email" name="email" id="email" required="required"/> </td> </tr> <!--13.工作年限--> <tr> <td align="right">工作年限：</td> <td> <select name="worktime"> <option value="0" selected="selected">无</option> <option value="1">1--3</option> <option value="2">3--5</option> <option value="3">5年以上</option> </select> </td> </tr> <!--14.身份证号码--> <tr> <td align="right">身份证：</td> <td> <input type="text" name="PersonID" id="PersonID" /><span id="PersonIDInfo"></span> </td> </tr> <!--15.重置 提交--> <tr> <td align="right">重置：</td> <td> <input type="reset" /> </td><td>
<button>提交</button> </td> </tr> </table> </form> </body></html>