功能:

验证表单字段，自带10多个验证规则。
无依赖。
自定义信息。
支持自定义验证规则的回调。
自定义方法便于声明。
依据条件验证某一表单字段。
可在所有主流浏览器中运行（甚至IE6）。
类似于 CodeIgniter 表单验证API。

安装和用法

在你的源码中嵌入以下 JavaScript:

<script type="text/javascript" src="validate.min.js"></script>

根据需求创建验证对象。该代码需处于 /body 结束之前的 script 标签中。原因是表单所在的DOM需要加载完，你添加的验证规则才能生效。


var validator = new FormValidator('example_form', [{
    name: 'req',
    display: 'required',
    rules: 'required'
}, {
    name: 'alphanumeric',
    rules: 'alpha_numeric'
}, {
    name: 'password',
    rules: 'required'
}, {
    name: 'password_confirm',
    display: 'password confirmation',
    rules: 'required|matches[password]'
}, {
    name: 'email',
    rules: 'valid_email',
    depends: function() {
        return Math.random() > .5;
    }
}, {
    name: 'minlength',
    display: 'min length',
    rules: 'min_length[8]'
}], function(errors, event) {
    if (errors.length > 0) {
        // Show the errors
    }
});

FormValidator

new FormValidator(formName, fields, callback)

FormValidator 对象被添加到 window 上。创建后，当名称为 formName 的表单提交时将验证字段。

formName 必须是一个有效的 form name 属性。

<form name="example_form"></form>

在表单提交时，fields 数组会被执行验证。该数组必须包含以下对象属性：

name（必须）

表单元素的 name属性。


var validator = new FormValidator('example_form', [{
    name: 'req',
    display: 'required',
    rules: 'required'
}, {
    name: 'alphanumeric',
    rules: 'alpha_numeric'
}, {
    name: 'password',
    rules: 'required'
}, {
    name: 'password_confirm',
    display: 'password confirmation',
    rules: 'required|matches[password]'
}, {
    name: 'email',
    rules: 'valid_email',
    depends: function() {
        return Math.random() > .5;
    }
}, {
    name: 'minlength',
    display: 'min length',
    rules: 'min_length[8]'
}], function(errors, event) {
    if (errors.length > 0) {
        // Show the errors
    }
});

display（可选）

出现在错误信息中的字段名称。如果不存在，将会使用 name 参数代替。

例如：如果字段名称是 user，你可以选择用 “用户名” 显示。

rules（必须）

一个或多个规则，用"|"连接。

例如：required|min_length[8]|matches[password_confirm]

depends（可选）

字段验证前执行的一个函数。如果函数返回 false，说明字段不符合声明的规则。


depends: function(field) {
  return Math.random() > .5;
}

验证完成后会触发一个回调。这个回调应该有两个参数。

errors

表单验证对象错误的数组。如果 length > 0, 表单验证失败。

这个数组最多包含4个属性：

id: 表单元素的id属性。
name: 表单元素的name属性。
message: 显示的错误信息。
messages: 每个验证错误的字段，所指定显示的错误信息。
rule: 触发该错误的验证规则。

event

如果浏览器支持，表单提交时将传入event。


function(errors, event) {
    if (errors.length > 0) {
        var errorString = '';

        for (var i = 0, errorLength = errors.length; i < errorLength; i++) {
            errorString += errors[i].message + '
';
        }

        el.innerHTML = errorString;
    }
}

自定义验证规则

validate.js 支持自定义验证规则。它运行你扩展 validate.js 来满足你的需求。一个常见的例子就是检查密码强度。

首先，你需要为该字段添加规则。必须以“callback_”开头。


depends: function(field) {
  return Math.random() > .5;
}

然后你必须调用 FormValidator 实例的 registerCallback 方法，该方法具有两个参数，自定义规则的名称和带有一个参数的函数。这个参数就是字段的值。如果这个值通过了你的自定义验证，返回 true，否则返回 false。你可以用 setMessage 为这个规则设置一个信息，如下。


validator.registerCallback('check_password', function(value) {
    if (passwordIsStrong(value)) {
        return true;
    }

    return false;
})
.setMessage('check_password', 'Please choose a stronger password using at least 1 number.');

Callbacks 将会按照下面的规则执行：

如果存在 required 规则，callback将会触发一次，忽略其他验证规则。
如果字段不必填，并且时空值，callback不会被触发，除非遇到 3 这种情况。
如果先于"!"，总是会触发回调。例如规则，'!callback_myCustomCallback'

可用的方法

setMessage

validator.setMessage(rule, message)

在validate.js顶部，所有默认的错误信息都在 defaults 对象中。如果你想改变一个信息，使其应用广泛，你可以在源码中这样操作。如果你想改变一个表单的信息，在 FormValidator 实例中用这个方法。当设置一个新信息时，你需要用 %s, 它会在表单数组中被 display 参数替换掉。

validator.setMessage('required', 'You must fill out the %s field.');

registerCallback

validator.registerCallback(rule, callback)

在一个字段数组中用匹配一个自定义的规则，并触发一个回调。


depends: function(field) {
  return Math.random() > .5;
}

registerConditional

validator.registerConditional(name, callback)

一个轮询语句的依赖函数，验证一个是否声明的指定字段。


{
    name: 'first_name',
    rules: 'required',
    depends: 'checkForRandomNumber'
}

可用的规则

规则	描述	参数	例子
required	如果表单元素为空则返回false	no
matches	如果表单元素的值不匹配参数之一，则返回false。	yes	matches[other_element]
valid_email	如果表单元素的值不是一个正确的电子邮件地址，则返回false。	no
valid_emails	多个值被逗号分隔，如果有一个值是无效的电子邮件地址，则返回false。	no
min_length	如果表单元素的值比指定位数少，则返回false。	yes	min_length[6]
max_length	如果表单元素的值比指定位数多，则返回false。	yes	max_length[8]
exact_length	如果表单元素值的位数与给定位数不一致，则返回false。	yes	exact_length[4]
greater_than	如果表单元素值比指定参数小，则返回false。	yes	greater_than[10]
less_than	如果表单元素值比指定参数大，则返回false。	yes	less_than[2]
alpha	如果表单元素包含任何指定字符，则返回false。	no
alpha_numeric	如果表单元素包含任何指定字母数字组成的字符，则返回false。	no
alpha_dash	如果表单元素包含任何指定字母数字组成的字符、下划线、标点，则返回false。	no
numeric	如果表单元素包含任何指定数字字符，则返回false。	no
integer	如果表单元素包含任何一个整型字符，则返回false。	no
decimal	如果表单元素包含任何小数，则返回false。	no
is_natural	如果表单元素包含任何一个自然数，则返回false。0, 1, 2, 3，等。	no
is_natural_no_zero	如果表单元素包含任何一个自然数（不包括0），则返回false。1, 2, 3，等。	no
valid_ip	如果输入的IP地址无效，则返回false。	no
valid_base64	如果输入的字符包含任何Base64字符，则返回false。	no
valid_credit_card	如果输入的字符不是有效的信用卡号，则返回false。	no
valid_url	如果输入的字符不是有效的url，则返回false。	no
is_file_type	如果输入的文件不在参数（用逗号隔开的数组）范围内，则返回false。	yes	is_file_type[gif,png,jpg]