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 />

</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文档。。。。