richharrison validate.js源码学习

用法

因为这个插件利用window以及dom设计，因此只适用前端js，首先引入js放在body结束前。

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

然后在script里创建一个实例对象。

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    }});

语法如下

new FormValidator(formName, fields, callback)

其中，formName是form的名字，通过form的name属性赋值获得。

<form name="myForm"></form>

属性(properties)共有四个，其中必须（required）的属性包括：

• name 代表表单的属性name的值
• rules 代表想要匹配的规则

可选（optional）的属性包括：

• diaplay 设置出错时显示的field名称。默认为parameter
• depends 设置一个function ， 在验证整个fields前触发，若返回false，则不会验证规则。

fields是一个数组，这个数组必须包含对象（objects）, 和对象（objects）的属性（properties）。
callback接受两个参数。

1.errors
如果errors的长度（length）大于0 ， 则验证不通过。errors包含的是对象（Objects），其中有五个属性。

• id 元素的id
• name 元素的name值
• message 错误信息
• messages 错误信息
• rule 出错的规则
  2.event
  如果浏览器支持 ， 触发onsubmit 事件。

扩展性

可以添加自己的规则到实例中。callback_是必须的。

rules: 'required|callback_check_password'

然后调用registerCallback 函数和可选的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.');

回调规则
- If the required rule is present, a callback will be fired once all other validation rules pass.
- If the field is not required and it is empty, the callback will not be called unless condition #3 is met.
- A callback will always be called if it is preceded by an ‘!’ i.e. rules: ‘!callback_myCustomCallback’
可用的方法
- setMessage
- registerCallback
- registerConditional
setMessage方法，替换显示信息，接受两个参数。

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

registerCallback方法，添加一个验证选项，接受两个参数。

validator.registerCallback('check_email', function(value) {    if (emailIsUnique(value)) {        return true;    }    return false;});

registerConditional方法，在验证表单前添加一个条件函数。

{    name: 'first_name',    rules: 'required',    depends: 'checkForRandomNumber'}validator.registerConditional('checkForRandomNumber', function(field) {    return Math.random() > .5;});

模块设计

一个立即执行函数，将整个FormValidator类放在非全局作用域下 ， 避免变量污染。

(function(window , document , undefined){})(window , document);

但是又需要在作用域外的地方可以访问到这个类，所以在立即执行函数中加上了这一句。将FormValidator作为全局window的一个属性，这样既保证了FormValidator的封装性，又可以通过window.FormValidator在全局中访问FormValidator。

window.FormValidator = FormValidator;

最后添加符合commonjs规范的模块化exports.

if (typeof module !== 'undefined' && module.exports) {    module.exports = FormValidator;}