jquery表单验证插件——MintValidator

简介

表单验证插件，正则表达式和回调函数验证结合，更强的灵活性。支持ajax验证，支持二维验证

网站：http://mint-ui.wemakers.net/

下载：http://git.oschina.net/895925636/mint-ui

用法

MintValidator在用法上与其他不是很相同，所有配置要在js里完成，这主要是为了实现js代码和html分离。MintValidator为了强调灵活，并没有做那种“一种代码搞定所有事”的事情，因此使用上显得不是那么的友好。

引入依赖

<script src="../../lib/jquery-1.8.3.min.js"></script>
<script src="MintValidator.min.js"></script>

编写html

<form id="registerForm">
    <dl>
        <dt>昵称：</dt><dd><input type="text" name="nickname"/></dd>
        <dt>邮件：</dt><dd><input type="text" name="email"/></dd>
        <dt>密码：</dt><dd><input type="password" name="pwd"/></dd>
        <dt>确认：</dt><dd><input type="password" name="pwd1"/></dd>
        <dt></dt><dd><button type="button" id="register">注&emsp;册</button></dd>
    </dl>
</form>

定义验证规则

/*先定义验证规则*/
var rules = {
    "email"        : {
        "rule" : /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/,
        "tip" : "邮箱格式不对"
    },
    "eq"        : {
        "rule" : function(val, formData){ return val == formData.pwd; },
        "tip" : "密码不匹配"
    },
    "notnull" : {
        "rule" : function(val, formData){return !(val == "")},
        "tip" : "不要为空"
    }
};

将验证规则绑定到表单的输入框上

/*把验证规则应用到表单文本域上*/
var inputs = [{ 
        name         : "nickname", //表单域的name属性值
        rules         : ['notnull'], //采用什么规则验证此输入框，可配置多个规则
        focusMsg     : '不能为空', //当表单域获得焦点时的提示信息
        rightMsg    : '昵称可用(^_^)', //当表单域验证成功时的提示信息
        errorMsg    : "请输入昵称", //当表单验证不成功时的提示信息

        /*定义ajax验证参数，结合后台验证昵称*/
        ajax         : {
               url     : "account/confirm_nickname",
               dataType:"json",
               filter     : function(data){
                   if(data.result){
                       data.msg = "昵称可以注册(^_^)";
                   } else if(d.data > 0){
                       data.msg = "此昵称已被占用(^_^)||";
                   }
                   return data;
               }
           }
    },{ 
        name         : "pwd",    
        rules         : ['notnull'],
        focusMsg     : '登陆密码',
        rightMsg     : "密码有效(^_^)"
    },{ 
        name         : "pwd1",    
        rules         : ['eq'],        
        focusMsg     : '确认密码',    
        rightMsg     : "密码匹配(^_^)",
    },{ 
        name         : "email",
        rules         : ["email"],    
        focusMsg     : '常用邮箱',
        rightMsg     : "邮箱有效(^_^)"
    }
];

构造初始化参数

var setting = {
        inputs                : inputs,
        submitButton         : "#register",
        rules                 : rules,
        showTipsAfterInit     : true,
        onSubmit             : function(result, button, form){
            if(result){
                //如果表单的验证结果为true,则可以手动通过ajax提交表单
            }
        }
    }

/*最终验证表单*/
$("#registerForm").validateForm(setting);

初始化参数

验证规则定义规范(setting.rules)

验证规则是一个对象，该对象的每个成员就是一天验证规则，规则的组成：

属性	描述
rule	验证规则可以是正则表达式，也可以是回调函数。 正则表达式：输入框的输入将会运用正则表达式去匹配，匹配成功说明输入正确，否则输入不正确 回调函数：回调函数有两个内置参数value和formData。 value：当前被验证输入框的值； formData：整个表单序列化成的一个对象，formData的属性名是表单内输入框的"name"属性，属性的值是对应输入框的值。 这两个参数可以帮助你王城二维验证——根据多个输入框的值完成判断。 回到函数要返回一个boolean的值，true表示验证通过，false表示验证不通过
tip	当输入框的值不能被本规则验证通过时，显示的提示信息

验证规则绑定的方法（setting.inputs）

验证规则的绑定通过一个数组实现的，数组内每个元素是一个对象，这些对象记录每个输入框的验证配置，这些对象的结构如下表：

属性名	是否必选	描述
name	yes	输入框“name”属性值
rules	no	对输入框应用的规则，可以配置多个验证规则
focusMsg	no	当输入框聚焦时的提示消息
rightMsg	no	当输入框验证通过时的提示消息
errorMsg	no	当输入框验证不通过时的提示消息
ajax	no	如果该输入框需要后台的验证，就需要配置ajax验证参数。ajax是一个对象，有三个属性url、dataType和filter。 url:ajax请求的url，验证器会将当前输入框的值发送过去，参数名是输入框的“name”属性值 dataType:预期服务器返回的数据类型，可以参考jQuery的ajax方法。 filter：这是一个回调函数。ajax接收到的数据会传递给filter。 这个函数应该返回一个对象，这个对象有两个属性：result和msg（比如像这样{result:true,msg:"验证通过"}）。 result是boolean类型，true表示输入框的值通过了验证；msg是提示信息。

验证器的初始化参数(setting)

属性名	类型	描述
rules	object	预定义的验证规则，参考3.1
inputs	array	验证规则和输入框的绑定配置，参考3.2
showTipsAfterInit	boolean	插件初始化之后是不是显示输入框配置的“focusMsg”提示
submitButton	string	触发整个表单验证的按钮
onSubmit	function	当表单被提交时 或者 “触发整个表单验证的按钮”被点击时，该函数会被调用。这个回调函数有三个内置参数：result、button、form。result是整个表单的验证结果，只有所有的输入框都验证通过时，才是true；button是触发整个表单验证的按钮；form是表单对象