jQuery之表单校验：新用户注册
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>第10章新用户注册</title> <script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script> <script type="text/javascript" src="js/jQuery1.11.1.js"></script> <link rel="stylesheet" href="css/register.css"> </style> <script type="text/javascript"> $(function() { //验证通行证用户名的非空验证 function Passname() { var pname = $("#userName").val(); if (pname == '') { $("#userNameId").addClass('error_prompt'); $("#userNameId").html("验证通行证用户名不能为空"); return false; } //规定正则以数字字母开头 var reg = /^[a-zA-Z][a-zA-Z0-9_]*$/; if (reg.test(pname) == false) { $("#userNameId").addClass("error_prompt"); $("#userNameId").html("由字，数，下，点，减号组成..."); //$("#userName").val(""); return false; } else if (reg.test(pname) == true) { $("#userNameId").addClass('ok_prompt'); $("#userNameId").html("通行证用户名输入正确"); return true; } } //通行证失去焦点的时候 var blurname = $("#userName"); blurname.blur(function() { return Passname(); }); //验证登陆密码长度为6~16位 //密码是6-16位字母加数字 function Pwd11() { var textpwd = $("#pwd").val(); if (textpwd =='') { $("#pwdId").addClass("error_prompt"); $("#pwdId").html("密码是必填！"); return false; } var pwd11 = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/; if (pwd11.test(textpwd) == false) { $("#pwdId").addClass("error_prompt"); $("#pwdId").html("密码是6-16位字母加数字"); return false; }else if (pwd11.test(textpwd) == true) { $("#pwdId").addClass("ok_prompt"); $("#pwdId").html("密码格式合格"); return true; } } //密码失去焦点 var blurpwd = $("#pwd"); blurpwd.blur(function() { return Pwd11(); }); //再次验证密码 function twopwd(){ var firstpwd = $("#pwd").val();//第一次输入的密码 var tpwd = $("#repwd").val();//第二次输入的密码的时候。 if (firstpwd != tpwd) { $("#repwdId").addClass("error_prompt"); $("#repwdId").html("两次输入的密码不一致！"); return false; }else{ //$("repwdId").html(""); return true; } } //重复密码失去焦点 var blurtwopwd = $("#repwd"); blurtwopwd.blur(function() { return twopwd(); }); /* //真实姓名 function truename(){ var regname = $("#realName").val(); //汉字 var regn = /^[\u4e00-\u9fa5]{2,4}$/; if (regn.test(regname) == false) { $("#pwdId").addClass("ok_prompt"); $("#pwdId").html("密码格式合格"); return true; } } */ //昵称 function nickname(){ var kname = $("#nickName").val(); var len = kname.replace(/[\u4e00-\u9fa5]/g,"xx").length; if (len == 0) { $("#nickNameId").addClass("error_prompt"); $("#nickNameId").html("昵称的输入的格式不正确！"); return false; }else{ $("#nickNameId").addClass("ok_prompt"); $("#nickNameId").html("昵称的输入的格式正确！"); return true; } } //昵称失去焦点 var e = $("#nickName"); e.blur(function(){ return nickname(); }); //验证以1开头的11位手机号码 function number(){ var num = $("#tel").val(); var regnum = /^1([1-9]|4[57]|5[0-35-9]|7[0135678]|8[0-9])\d{8}$/; if (regnum.test(num) == false) { $("#telId").addClass("error_prompt"); $("#telId").html("请以1开头的11位手机号码"); return false; }else if (regnum.test(num) == true) { $("#telId").addClass("ok_prompt"); $("#telId").html("关联手机号正确！"); return true; } } //失去焦点的时候 var num1 = $("#tel"); num1.blur(function(){ return number(); }); //邮箱 function emails(){ var ema = $("#email").val(); if (ema == '') { $("#emailId").addClass("import_prompt"); $("#emailId").html("跟你说了多少遍了别空格"); } } var emalss = $("#email"); emalss.blur(function(){ return emails(); }); //form.submit提交的按钮 $("#registerForm").submit(function() { return Passname()&&Pwd11()&&twopwd()&&nickname()&&number()&&emails(); }); //键盘点击事件 $(document).keydown(function(event) { if (event.keyCode == "13") {//按下回车键 return Passname()&&Pwd11()&&twopwd()&&nickname()&&number()&&emails(); } }); }); </script> </head> <body> <div id="header"> <img src="images/register_logo.gif" alt="logo" /> </div> <div id="main"> <form id="registerForm" action="myCart.html" method="post" name="myform"> <dl> <dt>通行证用户名：</dt> <dd> <input type="text" id="userName" class="inputs userWidth" />@163.com </dd> <dd> <div id="userNameId"></div> </dd> </dl> <dl> <dt>登录密码：</dt> <dd> <input type="password" id="pwd" class="inputs" /> </dd> <dd> <div id="pwdId"></div> </dd> </dl> <dl> <dt>重复登录密码：</dt> <dd> <input type="password" id="repwd" class="inputs" /> </dd> <dd> <div id="repwdId"></div> </dd> </dl> <dl> <dt>性别：</dt> <dd> <input name="sex" type="radio" value="" checked="checked" />男 <input name="sex" type="radio" value="" />女 </dd> </dl> <dl> <dt>真实姓名：</dt> <dd> <input type="text" id="realName" class="inputs" /> </dd> </dl> <dl> <dt>昵称：</dt> <dd> <input type="text" id="nickName" class="inputs" /> </dd> <dd> <div id="nickNameId"></div> </dd> </dl> <dl> <dt>关联手机号：</dt> <dd> <input type="text" id="tel" class="inputs" /> </dd> <dd> <div id="telId"></div> </dd> </dl> <dl> <dt>保密邮箱：</dt> <dd> <input type="email" id="email" class="inputs" /> </dd> <dd> <div id="emailId"></div> </dd> </dl> <dl> <dt></dt> <dd> <input name=" " type="image" src="images/button.gif" /> </dd> </dl> </form> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>第10章新用户注册</title> <script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script> <script type="text/javascript" src="js/jQuery1.11.1.js"></script> <link rel="stylesheet" href="css/register.css"> </style> <script type="text/javascript"> $(function() { //验证通行证用户名的非空验证 function Passname() { var pname = $("#userName").val(); if (pname == '') { $("#userNameId").addClass('error_prompt'); $("#userNameId").html("验证通行证用户名不能为空"); return false; } //规定正则以数字字母开头 var reg = /^[a-zA-Z][a-zA-Z0-9_]*$/; if (reg.test(pname) == false) { $("#userNameId").addClass("error_prompt"); $("#userNameId").html("由字，数，下，点，减号组成..."); //$("#userName").val(""); return false; } else if (reg.test(pname) == true) { $("#userNameId").addClass('ok_prompt'); $("#userNameId").html("通行证用户名输入正确"); return true; } } //通行证失去焦点的时候 var blurname = $("#userName"); blurname.blur(function() { return Passname(); }); //验证登陆密码长度为6~16位 //密码是6-16位字母加数字 function Pwd11() { var textpwd = $("#pwd").val(); if (textpwd =='') { $("#pwdId").addClass("error_prompt"); $("#pwdId").html("密码是必填！"); return false; } var pwd11 = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/; if (pwd11.test(textpwd) == false) { $("#pwdId").addClass("error_prompt"); $("#pwdId").html("密码是6-16位字母加数字"); return false; }else if (pwd11.test(textpwd) == true) { $("#pwdId").addClass("ok_prompt"); $("#pwdId").html("密码格式合格"); return true; } } //密码失去焦点 var blurpwd = $("#pwd"); blurpwd.blur(function() { return Pwd11(); }); //再次验证密码 function twopwd(){ var firstpwd = $("#pwd").val();//第一次输入的密码 var tpwd = $("#repwd").val();//第二次输入的密码的时候。 if (firstpwd != tpwd) { $("#repwdId").addClass("error_prompt"); $("#repwdId").html("两次输入的密码不一致！"); return false; }else{ //$("repwdId").html(""); return true; } } //重复密码失去焦点 var blurtwopwd = $("#repwd"); blurtwopwd.blur(function() { return twopwd(); }); /* //真实姓名 function truename(){ var regname = $("#realName").val(); //汉字 var regn = /^[\u4e00-\u9fa5]{2,4}$/; if (regn.test(regname) == false) { $("#pwdId").addClass("ok_prompt"); $("#pwdId").html("密码格式合格"); return true; } } */ //昵称 function nickname(){ var kname = $("#nickName").val(); var len = kname.replace(/[\u4e00-\u9fa5]/g,"xx").length; if (len == 0) { $("#nickNameId").addClass("error_prompt"); $("#nickNameId").html("昵称的输入的格式不正确！"); return false; }else{ $("#nickNameId").addClass("ok_prompt"); $("#nickNameId").html("昵称的输入的格式正确！"); return true; } } //昵称失去焦点 var e = $("#nickName"); e.blur(function(){ return nickname(); }); //验证以1开头的11位手机号码 function number(){ var num = $("#tel").val(); var regnum = /^1([1-9]|4[57]|5[0-35-9]|7[0135678]|8[0-9])\d{8}$/; if (regnum.test(num) == false) { $("#telId").addClass("error_prompt"); $("#telId").html("请以1开头的11位手机号码"); return false; }else if (regnum.test(num) == true) { $("#telId").addClass("ok_prompt"); $("#telId").html("关联手机号正确！"); return true; } } //失去焦点的时候 var num1 = $("#tel"); num1.blur(function(){ return number(); }); //邮箱 function emails(){ var ema = $("#email").val(); if (ema == '') { $("#emailId").addClass("import_prompt"); $("#emailId").html("跟你说了多少遍了别空格"); } } var emalss = $("#email"); emalss.blur(function(){ return emails(); }); //form.submit提交的按钮 $("#registerForm").submit(function() { return Passname()&&Pwd11()&&twopwd()&&nickname()&&number()&&emails(); }); //键盘点击事件 $(document).keydown(function(event) { if (event.keyCode == "13") {//按下回车键 return Passname()&&Pwd11()&&twopwd()&&nickname()&&number()&&emails(); } }); }); </script> </head> <body> <div id="header"> <img src="images/register_logo.gif" alt="logo" /> </div> <div id="main"> <form id="registerForm" action="myCart.html" method="post" name="myform"> <dl> <dt>通行证用户名：</dt> <dd> <input type="text" id="userName" class="inputs userWidth" />@163.com </dd> <dd> <div id="userNameId"></div> </dd> </dl> <dl> <dt>登录密码：</dt> <dd> <input type="password" id="pwd" class="inputs" /> </dd> <dd> <div id="pwdId"></div> </dd> </dl> <dl> <dt>重复登录密码：</dt> <dd> <input type="password" id="repwd" class="inputs" /> </dd> <dd> <div id="repwdId"></div> </dd> </dl> <dl> <dt>性别：</dt> <dd> <input name="sex" type="radio" value="" checked="checked" />男 <input name="sex" type="radio" value="" />女 </dd> </dl> <dl> <dt>真实姓名：</dt> <dd> <input type="text" id="realName" class="inputs" /> </dd> </dl> <dl> <dt>昵称：</dt> <dd> <input type="text" id="nickName" class="inputs" /> </dd> <dd> <div id="nickNameId"></div> </dd> </dl> <dl> <dt>关联手机号：</dt> <dd> <input type="text" id="tel" class="inputs" /> </dd> <dd> <div id="telId"></div> </dd> </dl> <dl> <dt>保密邮箱：</dt> <dd> <input type="email" id="email" class="inputs" /> </dd> <dd> <div id="emailId"></div> </dd> </dl> <dl> <dt></dt> <dd> <input name=" " type="image" src="images/button.gif" /> </dd> </dl> </form> </div> </body> </html>
CSS的样式：
* {padding:0;margin:0;} #header,#main{ width:600px; margin:0 auto; } #main{ padding: 10px; border: 1px #999999 solid; border-radius: 8px; overflow: hidden; } .inputs{ border:solid 1px #a4c8e0; width:150px; height:15px; } .userWidth{ width:110px; } dl dd div{ display: inline-block; font-size:12px; color:#000; margin-left: 5px; line-height: 18px; } dl{ clear:both; line-height: 22px; } dt,dd{ float:left; } dt{ width:110px; text-align:right; font-size:14px; height:30px; line-height:25px; } dd{ font-size:12px; color:#666666; } dl>dd:first-of-type{width: 170px;} .import_prompt{ border:solid 1px #ffcd00; background-color:#ffffda; padding-left:5px; padding-right:5px; line-height:20px; } .error_prompt{ border:solid 1px #ff3300; background:#fff2e5 url(../images/li_err.gif)5px 2px no-repeat; padding:2px 5px 0px 25px; line-height:20px; } /*褰撴枃鏈鍐呭杈撳叆姝ｇ‘鏃讹紝鎻愮ず鏂囨湰鐨勬牱寮�*/ .ok_prompt{ border:solid 1px #01be00; background:#e6fee4 url(../images/li_ok.gif) 5px 2px no-repeat; padding:2px 5px 0px 25px; line-height:20px; }
希望能够帮到大家。
