jQuery Plugins Validate

validate报错

 1 //onfocusout默认为true，但是加上会报错。
 2 //官方文档解释：
 3 //A boolean true is not a valid value.
 4 $("#test").validate({
 5     debug:true,
 6     onfocusout:true,
 7     rules: {
 8         testName: "required",
 9     },
10     messages: {
11         testName: { required: "请输入姓名" }
12     }
13 });

校验规则写在js代码

表单元素的获取使用name属性，区分大小写

 1 $().ready(function () {
 2     $("#formRegister").validate({
 3         debug: true,
 4         rules: {
 5             Email: {
 6                 required: true,
 7                 email: true,
 8             },
 9             Password: {
10                 required: true,
11                 rangelength: [6, 20],
12             },
13             repeat: {
14                 equalTo: ‘#password‘,
15             }
16         },
17         messages: {
18             Email: {
19                 required: ‘Email必须填写‘,
20                 email: ‘请输入正确的Email地址‘,
21             },
22             Password: {
23                 required: ‘密码必须填写‘,
24                 rangelength: ‘密码长度6-20位‘,
25             },
26             repeat: {
27                 equalTo: ‘两次输入的密码必须相同‘
28             }
29         }
30     });
31 });

校验代码写在html控件

 1 <form id="myform" method="post" action="">
 2     <p>
 3         <label for="myname">用户名：</label>
 4         <!-- id和name最好同时写上 -->
 5         <input id="myname" name="myname" class="required" />
 6     </p>
 7     <p>
 8         <label for="email">E-Mail：</label>
 9         <input id="email" name="email" class="required email" />
10     </p>
11     <p>
12         <label for="password">登陆密码：</label>
13         <input id="password" name="password" type="password"
14                class="{required:true,minlength:5}" />
15     </p>
16     <p>
17         <label for="confirm_password">确认密码：</label>
18         <input id="confirm_password" name="confirm_password" type="password"
19                class="{required:true,minlength:5,equalTo:‘#password‘}" />
20     </p>
21     <p>
22         <label for="confirm_password">性别：</label>
23         <!-- 表示必须选中一个 -->
24         <input type="radio" id="gender_male" value="m" name="gender" class="{required:true}" />
25         <input type="radio" id="gender_female" value="f" name="gender" />
26     </p>
27     <p>
28         <label for="confirm_password">爱好：</label>
29         <!-- checkbox的minlength表示必须选中的最小个数,maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间  -->
30         <input type="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, minlength:2}" />
31         <input type="checkbox" id="spam_phone" value="phone" name="spam[]" />
32         <input type="checkbox" id="spam_mail" value="mail" name="spam[]" />
33     </p>
34     <p>
35         <label for="confirm_password">城市：</label>
36         <select id="jungle" name="jungle" title="Please select something!" class="{required:true}">
37             <option value=""></option>
38             <option value="1">厦门</option>
39             <option value="2">泉州</option>
40             <option value="3">Oi</option>
41         </select>
42     </p>
43     <p>
44         <input class="submit" type="submit" value="立即注册" />
45     </p>
46 </form>