2017.11.27笔记

validation 插件 
Validation 是一个优秀的表单验证插件。

1.快速上手 
首先引入Validation库。

<script src="./js/jquery.validate.js" type="text/javascript"></script>

<p>
     <label for="cusername">姓名</label>
     <em>*</em><input class="required" minlength="2" id="cusername" name="username" size="25" />
   </p>
   <p>
     <label for="cemail">电子邮件</label>
     <em>*</em><input class="required email" id="cemail" name="email" size="25"  />
   </p>
   <p>
     <label for="curl">网址</label>
     <em>  </em><input class="url" id="curl" name="url" size="25"  value="" />
   </p>
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(‘#commentForm’).validate();

2.不同的写法 
第一种写法

这种写法需要引入一个支持固定格式解析的jQuery插件，Validation将其很好的融合进验证规则编码中。

<p>
     <label for="cusername">姓名</label>
     <em>*</em><input class="{validate:{required:true,minlength:2}}" minlength="2" id="cusername" name="username" size="25" />
   </p>
   <p>
     <label for="cemail">电子邮件</label>
     <em>*</em><input class="{validate:{required:true,email:true}}" id="cemail" name="email" size="25"  />
   </p>
   <p>
     <label for="curl">网址</label>
     <em>  </em><input class="{validate:{url:true}}" id="curl" name="url" size="25"  value="" />
   </p>
 
 
1
2
3
4
5
6
7
8
9
10
11
12

 $('#commentForm').validate({meta:"validate"});
 
 
1

第二种方法 
不将验证规则写在 class 属性中，而写在javascript代码中。

$('#commentForm').validate({
        rules:{
            username:{
                required:true,
                minlength:2
            },
            email:{
                required:true,
                email:true
            },
            url:"url",
            comment:"required"
        }

     });
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3.默认校验规则 
验证规则 解释 
required:true 必输字段 
remote:”check.php” 使用ajax方法调用check.php验证输入值 
email:true 必须输入正确格式的电子邮件 
url:true 必须输入正确格式的网址 
date:true 必须输入正确格式的日期 
dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性 
number:true 必须输入合法的数字(负数，小数) 
digits:true 必须输入整数 
creditcard: 必须输入合法的信用卡号 
equalTo:”#field” 输入值必须和#field相同 
accept: 输入拥有合法后缀名的字符串（上传文件的后缀） 
maxlength:5 输入长度最多是5的字符串(汉字算一个字符) 
minlength:10 输入长度最小是10的字符串(汉字算一个字符) 
rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串”)(汉字算一个字符) 
range:[5,10] 输入值必须介于 5 和 10 之间 
max:5 输入值不能大于5 
min:10 输入值不能小于10