jquery.validate.js

jquery表单验证插件

特点

使用灵活，单个表单域可配置，不依赖form标签
每个表单域可以根据验证返回值不同而使用不同的提示语
错误样式可自定义
可失去焦点验证，或关闭该功能
支持后端验证
支持select验证

引入

依赖jQuery，请先引入jQuery
直接通过script标签引入

使用

引入插件后，会引入validate和validated两个对象级别的方法，使用方法:

    $('#fieldId').validate(options); //单个表单域验证配置
    $('#formId').validated(onSuccess, onFailure); //整个表单验证方法，#formId 可以是任意一个包含所有表单域的父元素

validate的参数options是一个对象，对象的属性如下：

options

参数	说明	类型	默认值
`expression`	验证表达式，验证通过返回0，未通过返回大于0的数值	string \| function(options [,callback]){}	function() {return 0}
`message1`	错误提示语，`message`后面的数字可以是任意值，如果`expression`返回`1`将使用`message1`的提示语，如果返回`2`使用`message2`的提示语，以此类推	string	-
`live`	是否开启失去焦点验证，select组件则是触发change时验证	boolean	true
`mode`	验证模式，`1`：正常input表单验证，`2`：`expression`函数会有一个回调函数的参数，用于异步校验，`3`：用于select验证	`1` \| `2` \| `3`	`1`
`error_input_class`	验证未通过时，被验证元素添加的样式	string	'error'
`error_message_class`	验证未通过时，提示语的样式	string	'valid-error'
`showError`	错误提示的显示方式，函数中的this指向当前验证元素（当默认的错误提示方式不能满足需求时，请重写该方法和`cleanError`方法）	function(options, fieldResult){}	验证未通过时，元素添加`error_input_class`样式，并且在其后面添加一个`error_message_class`样式的div显示提示语
`cleanError`	清除错误提示，重写`showError`时，一定要重写该方法	function(options) {}	清除验证元素的`error_input_class`，并清除后面的提示语

expression当其为函数时会有下列参数

参数	说明	类型	默认值
`options`	同`options`	object	-
`callback`	回调函数，`mode`为`2`时，必须执行该回调函数，验证通过时调用`callback(0)`，未通过时`callback`的参数是一个大于0的值	function(number) {}	-

showError默认函数如下

    function showError(options, fieldResult) {
        var errorEl = ['<div class="', options.error_message_class, '">', options['message' + fieldResult], '</div>'].join('');
        $(this).addClass(options.error_input_class).after(errorEl);
    }

cleanError默认函数如下

    function cleanError(options) {
        $(this).removeClass(options.error_input_class).next('.' + options.error_message_class).remove();
    }

表单提交时使用验证方法validated，使用的元素是包含所有表单域的任意父元素。 validated方法的两个参数都是函数，表单验证通过时回调第一个函数onSuccess，未通过时调用第二个参数onFailure，具体使用参见demo

TIPS: 如果想单独验证一下某个表单域可以使用方法：$('#fieldId').trigger('validate')

zhaowenhao/jquery.validate.js

jquery.validate.js

特点

引入

使用