JQuery注册页面表单检验完善
</html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册页面</title> <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <script type="text/javascript" src="../js/jquery.validate.min.js" ></script> <script type="text/javascript" src="../js/messages_zh.js" ></script> <style> label.error{ color:red; } label.sucess{ padding-left:20px; background: url(../img/register.gif) no-repeat 10px 2px; } </style> <script> $(function(){ $("#formCheck").validate({ rules:{ user:{ required:true, minlength:6 }, password:{ required:true, digits:true, minlength:6 }, email:{ required:true, email:true }, username:{ required:true, maxlength:5 }, sex:{ required:true } }, messages:{ user:{ required:"用户名不能为空", minlength:"用户名不能少于6" }, password:{ required:"密码不能为空", digits:"密码必须为数字", minlength:"密码不能少于六位" }, email:{ required:"邮箱必填", email:"邮箱格式不正确" }, username:{ required:"姓名必填", maxlength:"不能多于5位" }, sex:{ required:"性别必须勾选" } } // errorElement:"label", // success:function(label){ // label.text(" ").addClass("success"); // } }); }); </script> <script> $(function(){ //1 创建数组保存对应的城市 var city = new Array(3); city[0]=new Array("武汉","黄冈","襄阳"); }); </script> </head> <body> <table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px"> <!--1.logo部分--> <tr> <td> <!--嵌套一个一行三列的表格--> <table border="1px" width="100%"> <tr height="50px"> <td width="33.3%"> <img src="../img/logo2.jpg" height="47px" /> </td> <td width="33.3%"> <img src="../img/header.png" height="47px" /> </td> <td width="33.3%"> <a href="#">登录</a> <a href="#">注册</a> <a href="#">购物车</a> </td> </tr> </table> </td> </tr> <!--2.导航栏部分--> <tr height="50px"> <td bgcolor="black"> <a href="#"> <font size="5" color="white">首页</font> </a> <a href="#"> <font color="white">手机数码</font> </a> <a href="#"> <font color="white">电脑办公</font> </a> <a href="#"> <font color="white">鞋靴箱包</font> </a> <a href="#"> <font color="white">家用电器</font> </a> </td> </tr> <!--3.注册表单--> <tr> <td height="600px" background="../img/regist_bg.jpg"> <!--嵌套一个十行二列的表格--> <form action="#" id="formCheck" method="get" name="regForm" onsubmit="return checkForm()"> <table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white"> <tr height="40px"> <td colspan="2"> <font size="4">会员注册</font> USER REGISTER </td> </tr> <tr> <td width="80px"> 用户名 </td> <td> <input type="text" name="user" size="34px" id="user" onfocus="showTips('user','用户名必填')"<span id="userspan"></span> </td> </tr> <tr> <td> 密码 </td> <td> <input type="password" name="password" size="34px" id="password" /><span id="passwordspan"></span> </td> </tr> <tr> <td> 确认密码 </td> <td> <input type="password" name="repassword" size="34px" id="repassword"></input> </td> </tr> <tr> <td> Emaile </td> <td> <input type="text" name="email" size="34px" id="eamil"/> </td> </tr> <tr> <td> 姓名 </td> <td> <input type="text" name="username" size="34px"/> </td> </tr> <tr> <td>籍贯</td> <td> <select id="province"> <option>===请选择===</option> <option value="">湖北</option> <option value="">湖南</option> <option value="">河北</option> <option value="">河南</option> </select> <select id="city"> </select> </td> </tr> <tr> <td> 性别 </td> <td> <input type="radio" name="sex" value="男"/>男 <input type="radio" name="sex" value="女"/>女 </td> </tr> <tr> <td> 出生日期 </td> <td> <input type="text" name="birthday" size="34px"/> </td> </tr> <tr> <td> 验证码 </td> <td> <input type="text" name="yzm" /> <img src="../img/yanzhengma.png" /> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="注册" /> </td> </tr> </table> </form> </td> </tr> <!--4.广告图片--> <tr> <td> <img src="../img/footer.jpg" width="100%"/> </td> </tr> <!--5.友情链接和版权信息--> <tr> <td align="center"> <a href="#">关于我们</a> <a href="#">联系我们</a> <a href="#">招贤纳士</a> <a href="#">法律声明</a> <a href="#">友情链接</a> <a href="#">支付方式</a> <a href="#">配送方式</a> <a href="#">服务声明</a> <a href="#">广告声明</a> <p> Copyright © 2016-2018 xx商城 版权所有 </p> </td> </tr> </table> </body> </html>