使用jQuery的validation插件实现表单校验
前端表单校验：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单校验（使用validation插件实现）</title> 6 <script src="../jslib/jquery-1.11.0.js"></script> 7 <script src="../jslib/jquery.validate.js"></script> 8 <script src="../jslib/messages_zh.js"></script> 9 10 <script> 11 $(function () { 12 $("#formid").validate({ 13 rules:{ 14 username:{ 15 required:true 16 }, 17 password:{ 18 required:true, 19 rangelength:[6,10] 20 }, 21 repassword:{ 22 required:true, 23 equalTo:"[name='password']" 24 }, 25 height:{ 26 required:true, 27 min:[180] 28 }, 29 age:{ 30 required:true, 31 range:[18,56] 32 } 33 }, 34 messages:{ 35 username:{ 36 required:"不能为空" 37 }, 38 password:{ 39 rangelenght:"密码长度必须在在6-10个字符之间" 40 }, 41 height:{ 42 min:"身高必须在180以上" 43 }, 44 age:{ 45 range:"年龄必须在在18岁到56岁之间" 46 } 47 } 48 }); 49 }); 50 </script> 51 </head> 52 <body> 53 <form id="formid" action="#"> 54 55 <!--不能为空--> 56 用户名：<input type="text" name="username"/> <br/> 57 58 <!--长度在6-10个字符之间--> 59 密码：<input type="text" name="password"/> <br /> 60 61 重复密码：<input type="text" name="repassword"/> <br /> 62 63 <!--大于180cm--> 64 身高：<input type="text" name="height"/> <br /> 65 66 <!--在18岁到56岁之间--> 67 年龄：<input type="text" name="age"/> <br /> 68 69 邮箱：<input type="text" name="email"/> <br /> 70 71 <input type="submit" value="提交"/> 72 </form> 73 </body> 74 </html>
