一、 Validation Plug使用方法
例子：
<script src="vendor/jquery-1.10.0.js"></script>
<script src="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>
二、 基本验证方法
-
required 必填选项 required:true,代表该输入框必填
-
remote 远程校验
remote:{
url:"remote.json", //远程校验地址
type:'post', //校验类型
data:{
loginTime:function(){
return +new Date
}
}
} -
minlength 最小长度 minlength:2, 最小长度2字符
-
maxlength 最大长度
-
rangelength 长度范围 rangelength:[2,10],长度范围在2到10字符之间
-
min最小值 最小值 min:2 输入一个值，值的最小值为2
-
max最大值
-
range值范围
-
email Email格式 输入Email
-
url URL格式 输入URL，以https://或http://开头
-
data 日期
-
dataISO 标准日期格式
-
number 数字 输入一个数字
-
digits 整数 输入一个正整数
- equalTO 与另一个元素值相等 equalTo:”#password” 与name属性为password的元素的输入值相同
三、 高级方法 - 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})
- 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() 返回无效的元素的数量