案例：重写表单注册校验
用validation插件进行表单校验
要求：
1，用户名，密码，确认密码，Email，出生日期必填
2，用户名长度在6-12之间
3，密码和确认密码必须一致
4，Email必须符合邮箱格式
5，出生日期必须符合日期格式
分析：
关键点：
jQuery-validation插件
步骤：
1、插件导入
2、页面加载完成时，为表单绑定validate方法
3、加入校验规则
代码实现：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ height:400px; } #divFormId{ border: 5px solid #999; width: 640px; margin: 0 auto; padding: 20px; background-color: #fff; } #divbg{ background: url(img/regist_bg.jpg); height:100%; padding-top: 80px; } td{ padding-top: 10px; } label{ color:red; font-size:12px; } </style> <script src="../js/jquery-3.3.1.min.js"></script> <script src="../js/jquery.validate.js"></script> <script src="../js/messages_zh.js"></script> <script> $(function () { $("#f1").validate({ rules:{ username:{ required:true, rangelength:[6,12] }, pwd:{ required:true }, repwd:{ required:true, equalTo:"#pwd" }, email:{ required:true, email:true }, birthday:{ required:true, date:true } } }); }); </script> </head> <body> <div id="divbg"> <div id="divFormId"> <form id="f1" action="#" method="get"> <table width="400"> <tr> <td colspan="3"> <font color="#3164af" size="5">会员注册</font> USER REGISTER </td> </tr> <tr> <td align="right">用户名</td> <td colspan="2"> <input type="text" id="username" name="username" size="40"/> </td> </tr> <tr> <td align="right">密码</td> <td colspan="2"> <input type="password" id="pwd" name="pwd" size="40"/> </td> </tr> <tr> <td align="right">确认密码</td> <td colspan="2"> <input type="password" id="repwd" name="repwd" size="40"/> </td> </tr> <tr> <td align="right">Email</td> <td colspan="2"><input type="text" id="email" name="email" size="40"/> </td> </tr> <tr> <td align="right">性别</td> <td colspan="2"> <input type="radio" name="sex" value="man" checked="checked" />男 <input type="radio" name="sex" value="woman" />女 </td> </tr> <tr> <td align="right">出生日期</td> <td colspan="2"><input type="text" id="birthday" name="birthday" size="40"/> </td> </tr> <tr> <td width="80" align="right">验证码</td> <td width="100"><input type="text" id="verifyCode" name="verifyCode" /> </td> <td><img src="img/verifyCode.jpg" /> </td> </tr> <tr> <td></td> <td colspan="2"> <input type="image" src="img/submit.jpg" /> </td> </tr> </table> </form> </div> </div> </body> </html>
