validate 插件 · 99班随堂笔记和管理

## validation 插件 Validation 是一个优秀的表单验证插件。 ### 1.快速上手首先引入Validation库。 `<script src="./js/jquery.validate.js" type="text/javascript"></script>` ~~~javascript <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> $('#commentForm').validate(); ~~~ ### 2.不同的写法 **第一种写法** 这种写法需要引入一个支持固定格式解析的jQuery插件，Validation将其很好的融合进验证规则编码中。 ~~~javascript <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> $('#commentForm').validate({meta:"validate"}); ~~~ **第二种方法** 不将验证规则写在 class 属性中，而写在javascript代码中。 ~~~javascript $('#commentForm').validate({ rules:{ username:{ required:true, minlength:2 }, email:{ required:true, email:true }, url:"url", comment:"required" } }); ~~~ ### 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 |