jquery-validate插件

jQuery Validation 插件

优点：
1.表单验证非常简单方便，并且提供了许多配置项目
2.国际化，可以自定义提示信息

命令行安装

//初始化bower
bower init

//使用bower安装jquery
bower install jquery --save-dev

//使用bower安装jquery-validate插件
bower install jquery-validate --save-dev

//使用bower安装angular
bower install angular --save-dev

最简单的效果：
<form id="demoForm">
<fieldset>
<legend>用户登录</legend>
<p>
<label for="username" style="display: inline-block;width: 80px;">用户名:</label>
<input type="text" name="username" id="username"/>
</p>
<p>
<label for="password" style="display: inline-block;width: 80px;">密码:</label>
<input type="password" name="password" id="password"/>
</p>
<p>
<input type="submit"/>
</p>
</fieldset>
</form>

<!-- 要先引入jquery插件，再引入jquery.validate -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/jquery-validation/dist/jquery.validate.min.js"></script>
<script>
$('#demoForm').validate({
rules: { //rules里面的username和password都是name的属性值，而不是id
username: {
required: true,
minlength:2,
maxlength:10
},
password: {
required:true,
minlength:2,
maxlength:16
}
},
messages: {
username: {
required: '必须填写用户名',
minlength: '不低于2位',
maxlength: '不大于10位'
},
password: {
required:'必须填写密码',
minlength: '不低于2位',
maxlength: '不低于16位'
}
}
});
</script>

注意：rules里面的username和password都是name的属性值，而不是id

//点击提交按钮不提交
$('#demoForm').validate({
debug:true
});

基本验证方法
required 必填
remote:'remote.php/remote.json' 远程校验
minlength 最小长度
maxlength 最大长度
rangelength: [2, 10] 长度
min 最小值(代表数字的值)
max 最大值(代表数字的值)
range: [2, 10] 值范围(代表数字的值)(数字在2-10之间)
email:true Email格式
url:true URL格式
date:true 日期
dataISO:true 日期(格式是：yyy-mm-dd 或者 yyy/mm/dd)
number 数字
digits 整数
equlaTo 与另一个元素值相等

高级API
valid()方法：检查表单是否验证通过或某些元素是否有效

$('#check').click(function () {
console.log($('#demoForm').valid() ? '表单填写正确' : '表单填写错误');
});

rules()方法（浏览器控制台输入验证console）
1.rules() 获取表单某一元素的校验规则
$('#username').rules();
//Object {required: true, rangelength: Array[2], remote: "remote.json"}

2.rules('add', rules) 向表单增加校验规则
$('#username').rules('add', {minlength: 2, maxlength:10});
//Object {required: true, rangelength: Array[2], minlength: 2, maxlength: 10, remote: "remote.json"}

3.rules('remove', rules) 删除表单元素校验规则
$('#username').rules('remove', 'minlength maxlength')
//Object {minlength: 2, maxlength: 10}
$('#username').rules()
//Object {required: true, rangelength: Array[2], remote: "remote.json"}

 

Validator对象

var validator = $('#form').validate({});
validate()方法返回Validator对象
Validator对象的方法：
Validator.form() 验证表单是否有效，返回 true/false
Validator.element(element) 验证某个元素是否有效，返回true/false
Validator.resetForm() 把表单恢复到验证前原来的状态（错误信息会被清除掉）
Validator.showErrors(errors) 针对某个元素显示特定的错误信息
Validator.numberOfInvalids() 返回无效的元素数量（要触发验证var bool = $('#demoForm').valid()，才能统计数量）

[红字]提示：在console控制台，shift+enter才是换到下一行,enter是提交

validator.showErrors({
username:'你填错了，哈哈'
});

Validator对象的静态方法 — — 直接调用
$.validator.addMethod(name,method[,message]) 增加自定义的验证方法
$.validator.format(template,argument,argumentN...) 格式化字符串，用参数代替模板中的{n}
$.validator.setDefaults(options) 修改插件默认设置
$.validator.addClassRules(name,rules) 为包含class属性名批量增加验证类型(下图为实例，给classname为“txt”的元素添加验证类
型)

validate()方法配置项（jquery-validate插件的核心内容）
submitHandler通过验证后运行的函数，可以加上表单提交方法
invalidHandler无效表单提交后运行的函数
ignore对某些元素不进行验证
rules定义校验规则
messages定义提示信息
groups对一组元素的验证，用一个错误提示，用errorPlacement控制把出错信息放在那实例调用：
submitHandler:function(from){
//表单提交的方式
from.submit();

//表单序列化
console.log($(form).serialize());
}

ignore:"#hh" 对类hh不进行校验

每个rules的配置方法都有一个默认depends：function（element）{条件}，表示当函数满足条件时，才开始检验该配置方法<br>
当配置方法有参数时可为该方法添加参数param：x，当depends中函数满足条件时才传入参数进行配置

username:{
required:{
depends:function(element){
return $("#password").is(":filled"); //只有当密码被填写时才验证用户名
}
}
}

 更多参考API文档。。。。

 

转载于:https://www.cnblogs.com/lqcdsns/p/5389264.html