data-fv-less-than___max="2000" 规则配置复杂data-fv-different___compare="xxx" 仅支持与固定值对比，不支持与另一控件值对比，没有应用意义

只有required, type=number/email/url 等几个HTML5的规则支持配置，其他的规则全都需要写一大堆JavaScript

datatype="n0-2000" errormsg="请输入2000以下的数字"规则不直观，预定义规则较少，规则配置没有以data-开头不符合HTML5标准

data-vld="[ {required:true}, {number:[0,2000]}, {compare:'input[name=fieldName]'} ]"支持data-API，配置简洁直观，预定义规则丰富

<input data-vld="{ label:'登录账号', rules:[ {required:true}, {length:[4,10]}, ... ] }" />

<input data-vld="[ {required:true}, {length:[4,10]}, ... ]" />

<input data-vld="required:true" /> // 必填<input data-vld="regexp:'mobile'" /> // 手机号码

<label class="vld-label">登录账号</label><input type="text" data-vld="[...]" />

<label class="vld-label">账号</label><input type="text" data-vld="{ label:'登录账号', rules:[...] }" />

<form class="vld-form form-horizontal">  <div class="control-group vld-line">    <label class="control-label"><span class="asterisk">*</span> 登录账号</label>    <div class="controls">      <input class="span3" type="text" name="account"        data-vld="[ {required:true}, {length:[4,10]}, {regexp:'ascii'}, {regexp:'illegal-char'}, {ajax:'demo/ajax.txt',options:{type:'GET',dataType:'text'},text:'用户名已被使用'} ]" />      <span class="help-inline">        <i class="vld-tips">4-10位数字或字母</i>      </span>    </div>    <div class="controls">      <p>必填，4-10位，不支持中文字符</p>      <p>不允许包含!@#$%^*,./\等特殊字符，AJAX校验</p>    </div>  </div>  <div class="control-group vld-line">    <label class="control-label"><span class="asterisk">*</span> 密码</label>    <div class="controls">      <input class="span3" type="password" name="pwd" data-trim="false"         data-vld="[ {required:true}, {length:[6,16]}, {regexp:'ascii'}, {compare:'[name=account]',reverse:true}, {pwdlevel:'medium'} ]" />      <span class="help-inline">        <i class="vld-tips">密码必须包含字母/数字/特殊字符的任意两种</i>      </span>    </div>    <div class="controls">      <p>必填，6-16位，支持空格，不支持中文字符，不能与用户名相同</p>    </div>  </div>  <div class="control-group">    <label class="control-label"> </label>    <div class="controls">      <input type="button" class="btn btn-primary input-medium vld-submit" value="提交" />    </div>  </div></form>

{ required:true }

{ required:true, text:'请同意服务协议' }{ required:true, text:'请选择{label}' }

{ length:{min:4,max:12} } // 字符长度4-12位{ length:[4,12] } // 字符长度4-12位{ length:{min:4} } // 字符长度不得小于4位{ length:[4] } // 字符长度不得小于4位{ length:{max:12} } // 字符长度不得大于12位

{ number:true } // 必须是数字{ number:{min:1900,max:2999} } // 数字必须在1900-2999之间{ number:[1900,2999] } // 数字必须在1900-2999之间{ number:{min:1900} } // 数字不得小于1900{ number:[1900] } // 数字不得小于1900{ number:{max:2999} } // 数字不得大于2999{ number:true, sign:true } // 允许+-号{ number:true, decimal:4 } // 最多4位小数{ number:true, sign:true, decimal:4 } // 允许+-号, 最多4位小数

{ regexp:'xxx' }

(function(zv) { 	// 定义只允许输入数字和字母的表达式	zv.regexp["number-ascii"] = /^[0-9a-zA-Z]*$/;	zv.locals["zh-CN"]["regexp-number-ascii"] = "{label}只允许输入数字和字母"; 	// 定义不允许特殊字符的表达式	// reverse=true表示反转判断结果, 如果匹配就提示错误	zv.regexp["illegal-char"] = { value:/[!@#$%^\*,.\-<>]/, reverse:true };	zv.locals["zh-CN"]["regexp-illegal-char"] = "{label}不支持!@#$%^*,.-<>等特殊字符"; })(jQuery.fn.zhhvalidate.defaults);

{ regexp:/^[0-9a-zA-Z]*$/, text:'{label}只允许输入数字和字母' }

{ compare:'selector' }{ compare:'selector', reverse:true }

{ ajax:'url.do' }{ ajax:'url.do', fields:fields }{ ajax:'url.do', fields:fields, options:{ type:GET|POST, dataType:json|html|text, ...} }

(function(zv) {    // 自定义AJAX解析函数    var parse = zv.ajax.parse;    zv.ajax.parse = function(e, json) {        if ($.isPlainObject(json)) {            return { passed:json.code=="000000", text:json.message };        } else { // 调用原解析函数            return parse.call(this, e, json);        }    };})(jQuery.fn.zhhvalidate.defaults);

<form data-vld="init:true,oninput:true,focus:true,failFast:false,tips:true,disabled:false"><div class="vld-line" data-vld="group:true,failFast:false,tips:true,disabled:false"></div><input data-vld="tips:true,disabled:false"></input>

<div class="vld-line" data-vld="group:true"></div>

<form data-vld="group:true,failFast:true"></form>

$form.zhhvalidate("clear"); // 清除整个form$form.find("input[name=account]").zhhvalidate("clear"); // 清除指定校验单元

$form.zhhvalidate("disable"); // 禁用整个form$form.find("input[name=account]").zhhvalidate("disable"); // 禁用指定校验单元

$form.zhhvalidate("enable"); // 启用form$form.zhhvalidate("enable", true); // 启用整个form及所有校验单元$form.find("input[name=account]").zhhvalidate("enable"); // 启用指定校验单元

<form class="form-horizontal" data-options="disabled:true">  <div class="control-group">    <label class="control-label">手机号码</label>    <input name="account" data-vld="disabled:false, rules:[ ... ]" />  </div>  <div class="control-group">    <label class="control-label">短信验证码</label>    <input name="validCode" data-vld="disabled:false, rules:[ ... ]" />  </div>  <div class="control-group">    <label class="control-label">登录密码</label>    <input name="newPassword" data-vld="disabled:true, rules:[ ... ]" />  </div></form>

<form class="form-horizontal" data-options="disabled:false">  <div class="control-group">    <label class="control-label">手机号码</label>    <input name="account" data-vld="disabled:false, rules:[ ... ]" />  </div>  <div class="control-group">    <label class="control-label">短信验证码</label>    <input name="validCode" data-vld="disabled:false, rules:[ ... ]" />  </div>  <div class="control-group">    <label class="control-label">登录密码</label>    <input name="newPassword" data-vld="disabled:true, rules:[ ... ]" />  </div></form>

+function(zv) {    // 自定义AJAX解析函数    zv.ajax.parse = function(e, json) {        return { passed:json.code == "000000", text:json.message };    };    // 样式配置    zv.classes = {        "line-error": "vld-error", // 校验不通过时, 添加在校验单元上的样式        "line-passed": null, // 校验通过时, 添加在校验单元上的样式        "tips-error": "vld-error", // 校验不通过时, 添加在提示信息上的样式        "tips-passed": "vld-passed", // 校验通过时, 添加在提示信息上的样式        "tips-loading": "vld-loading" // 正在校验时, 添加在提示信息上的样式, 一般是AJAX校验用到    };    // 例如希望校验不通过时在校验单元上添加has-error样式:    zv.classes["line-error"] = "has-error";    // 选择符配置    zv.selectors = {        target: ["input[data-vld], textarea[data-vld], select[data-vld]"],        line: [".vld-line", ".form-group"], // form-group是bootstrap的表单行        label: [".vld-label", ".control-label"], // control-label是bootstrap的标签        tips: [".vld-tips"]    };    // 例如某项目选择了mui前端框架, 校验行是mui-input-row, 那么可以将该样式添加到列表中:    zv.selectors.line.push(".mui-input-row");    // 事件绑定    // 例如希望在文本框获得焦点时在校验单元上添加vld-typing样式:    zv.bind.push({on:"focus", selector:"input, textarea, select", fn:function() {        $(this).closest(zv.selectors.line.join(",")).addClass("vld-typing");    }});    zv.bind.push({on:"blur", selector:"input, textarea, select", fn:function() {        $(this).closest(zv.selectors.line.join(",")).removeClass("vld-typing");    }});}(jQuery.fn.zhhvalidate.defaults);

$("button[name=dosubmit]").click(function(e) {    e.preventDefault();    var $form = $(this).closest("form");    $form.zhhvalidate(function(e) {        if (e.passed) {            $form.submit();        }    });});

form.find("input[name=account]").zhhvalidate(function(e) {    if (e.passed) {        // do something    }});

$("button[name=dosubmit]").click(function(e) {    e.preventDefault();    var $form = $(this).closest("form");    // 设置tips=false, 不显示错误提示; 还可以设置failFast=true, 每次只显示一条提示    $form.zhhvalidate({ tips:false }, function(e) {        // 回调参数e        // -- passed(boolean) FORM表单校验是否通过        // -- text(String)    校验不通过时的错误原因(校验通过时为空)        // -- list([json])    每一个表单行的校验校验结果, json内容见vldinput的回调参数说明        if (e.passed) {            $form.submit();        } else {            alert(e.text); // 自己处理错误提示        }    });});

+function(zv) {    // 不能小于当前年份的自定义规则    zv.rules.put("year-less-current", function(e) {        if (parseInt(e.value || 0) < new Date().getFullYear()) {            return false; // 校验未通过        }        return true; // 校验通过    });    zv.locals["zh-CN"]["year-less-current"] = "{label}不能小于今年";}(jQuery.fn.zhhvalidate.defaults);

<input data-vld="[ {number:{max:9999}}, {'year-less-current':true} ]" />

// 校验不通过时, 返回值有如下5种情况, 用于获取提示信息以及替换占位符:// 1. result = false                               -- 根据规则名称从locals获取提示消息// 2. result = "key"                               -- 根据规则名称-key从locals获取提示消息// 3. result = { "{text}":text }                   -- text就是提示消息// 4. result = { "key":value }                     -- 根据规则名称-key从locals获取提示消息, 并替换占位符{key}// 5. result = { "{key}":key, x:xvalue, y:yvalue } -- 根据规则名称-key从locals获取提示消息, 并替换占位符{x},{y}+function(zv) {    // 年份自定义规则的提示消息    zv.locals["zh-CN"]["year-format"] = "{label}格式错误";    zv.locals["zh-CN"]["year-format-less-current"] = "{label}不能大于今年";