jquery.validate.js

jquery表单验证插件

特点

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

引入

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

使用

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

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

2. 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();
    }

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

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