html input validator,jquery表单验证插件——MintValidator

简介

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

用法

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

引入依赖

编写html

昵称：

邮件：

密码：

确认：

注 册

定义验证规则

/*先定义验证规则*/

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是表单对象