jQuery 表单验证 学习手记

一、 Validation Plug使用方法
例子：
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vendor/jquery-1.10.0.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vendor/jquery.validate-1.13.1.js"></script>
<script>
$(document).ready(function(){ //加载完页面执行
$("#demoForm").validate({ //获取表单元素demoForm，应用validate插件
rules: { //制定规则
username: { // name属性名为username的输入框
required:true, // 必填
maxlength:10, //最大长度10字符
minlength:2, //最小长度2字符
},
password: { //name属性名为password的输入框
required:true,
minlength:2,
maxlength:16
}
},
messages:{ //制定提示信息
username: {
required:"必须填写用户名",
maxlength:"用户名最大为10位",
minlength:"用户名最小为2位",
},
password: {
required:"必须填写密码",
minlength:"密码最小为2为",
maxlength:"密码最大为16位"
}
}
})
})
</script>
 
二、 基本验证方法

1. required 必填选项 required:true,代表该输入框必填

2. remote 远程校验
   remote:{
   url:"remote.json", //远程校验地址
   type:'post', //校验类型
   data:{
   loginTime:function(){
   return +new Date
   }
   }
   }

3. minlength 最小长度 minlength:2, 最小长度2字符

4. maxlength 最大长度

5. rangelength 长度范围 rangelength:[2,10],长度范围在2到10字符之间

6. min最小值 最小值 min:2 输入一个值，值的最小值为2

7. max最大值

8. range值范围

9. email Email格式 输入Email

10. url URL格式 输入URL，以https://或http://开头

11. data 日期

12. dataISO 标准日期格式

13. number 数字 输入一个数字

14. digits 整数 输入一个正整数

15. equalTO 与另一个元素值相等 equalTo:”#password” 与name属性为password的元素的输入值相同 
    三、 高级方法
16. valid()及rules()方法
    valid()方法，检查表单
    例子
    $("#check").click(function(){
    alert($("#demoForm").valid() ? "填写正确！":"填写错误！")
    }) // 点击check按钮。检查id为demoForm的表单是否填写正确，并弹出提示

rules()方法
rules() 获取表单元素的校验规则
$(“#username”).rules() // 获取id名为username的元素的校验规则

rules(“add”,rules) 增加校验规则
$(“#username”).rules(“add”,{minlength:2,maxlength:10})

rules(“remove”,rules)删除校验规则
$(“#username”).rules(“remove”,{minlength:2,maxlength:10})

1. validator方法
   validate方法返回validator对象，对返回的对象设置变量，变量名称可设为validator。
   先在脚本外设置变量 var validator；
   再在脚本中 将validate方法返回的validator对象赋值给变量

validator.form() 验证表单是否有效，返回true/false
validator.element(element) validator.element(“#username”),验证某个元素是否有效
validator.resetForm() 把表单恢复到验证前的状态
validator.showErrors(errors) 提示错误信息，不管输入的对不对
validator.showErrors({
username:"你填错了",
passowrd:"ahhaha"
})
validator.numberOfInvalids() 返回无效的元素的数量