jQ学习之利用validate插件进行表单的内容校验
在自己测试的时候，发现
1、form标签必须包裹table标签 否则无效，
2、引入包时必须先引入基础jQ包，之后引入validate包，最后引入message包，因为前者是后者的基础包。
注释在代码里，直接上代码：
1 <div id="tbl" style=" margin:auto; height: 1000px; border: blue 1px solid;position: relative; text-align: center;"> 2 3 <form action="#" method="get" id="checkForm"> 4 <table style="margin: auto; padding-top:400px ;"> 5 <tr> 6 <td> 7 姓名 8 </td> 9 10 <td> 11 <span style="color: red;"> 12 * 13 </span> 14 <input type="text" name="userName" id="userName" onfocus="of('userName')" onblur="ob()" /> 15 <span id="userNameSpan" style="color: gray; display: none;"> 16 </span> 17 </td> 18 </tr> 19 20 <tr> 21 <td> 22 年龄 23 </td> 24 25 <td> 26 <span style="color: red;"> 27 * 28 </span> 29 <input type="text" name="age" id="age" onfocus="of('age')" onblur="ob()" /> 30 <span id="ageSpan" style="color: gray; display: none;"> 31 32 </span> 33 </td> 34 </tr> 35 <tr> 36 <td> 37 账号 38 </td> 39 40 <td> 41 <span style="color: red;"> 42 * 43 </span> 44 <input type="text" name="userNumber" id="userNumber" /> 45 <span id="userNumberSpan"> 46 47 </span> 48 </td> 49 </tr> 50 <tr> 51 <td> 52 密码 53 </td> 54 55 <td> 56 <span style="color: red;"> 57 * 58 </span> 59 <input type="password" name="password" id="password" /> 60 <span id="passwordSpan"> 61 62 </span> 63 </td> 64 </tr> 65 <tr> 66 <td> 67 再次输入密码 68 </td> 69 70 <td> 71 <span style="color: red;"> 72 * 73 </span> 74 <input type="password" name="repassword" id="repassword" /> 75 <span id="repasswordSpan"> 76 77 </span> 78 </td> 79 </tr> 80 <tr> 81 <td colspan="2"> 82 <input type="submit" value="校验" /> 83 </td> 84 </tr> 85 </table> 86 </form> 87 </div>
1 $(function() { 2 //注意格式 3 $("#checkForm").validate({ 4 rules: { 5 userName: { 6 required: true 7 }, 8 age: { 9 required: true 10 }, 11 userNumber: { 12 required: true,//注意每个语句之间分割使用',' 13 minlength: 3, 14 maxlength: 6 15 }, 16 password: { 17 required: true, 18 rangelength: [3, 6] 19 }, 20 repassword: { 21 required: true, 22 equalTo: "[name='password']" 23 } 24 }, 25 messages: { 26 //编写方式和rules相同 27 } 28 }); 29 })
