jquery 表单验证插件

其他：

First name: Last name: secret: <input type="text" name="secret" value="Yousecret" /><br /></form>$SEO靠我("form").serialize(); //FirstName=Bill&LastName=Gates一般用法：$.ajax({type: post,url: your url,data: $("SEO靠我form").serialize(),success: function(data) {// your code}});

serializeArray()读取form表单中的所有数据列表

var sigiSEO靠我nList = $(form).serializeArray();

<div contenteditable="true">我是一个可被编辑的DIV</div>

一.jqeuryvalidate

二.nicSEO靠我e-validate

更多>>>

官方文档

参数选项

$("form").validator({debug :0, //调试//0：关闭实时验证，只在提交表单的时候执行验证//1：输入框失去焦点（focusoSEO靠我ut）时执行验证//2：输入框改变值（input）时执行验证//3：输入框失去焦点和改变值（综合 1 + 2） (v0.8.0+)//8：同 2，并且详细提示每个规则的结果 (v0.9.0+)//9：SEO靠我同 3，并且详细提示每个规则的结果 (v0.9.0+)//大于 100 的数值：验证延迟时间timely :1; //实时验证theme :"default", //主题stopOnError :faSEO靠我lse, //在第一次错误时停止验证 关闭此开关，以便一次性显示所有消息focusInvalid :true, //第一个错误字段自动获得焦点focusCleanup :false, //输入框获得焦SEO靠我点时清除验证消息ignoreBlank :false, //不验证空值的字段（只针对实时验证）ignore :"", // 默认忽略验证 jQuery 选择器选中的字段ignore ::hidden,SEO靠我 //任何不可见的元素，都不作验证ignore :#tab2, //id为tab2下的所有子元素都不作验证display:null, // 自定义消息中{0}的替换字符display:FunctionSEO靠我(elem){ // 自定义消息中{0}的替换字符return $(elem).closest(.form-item).children(label:eq(0)).text();},target :nSEO靠我ull, //默认 自定义消息的显示位置target :#myContainer, // 将所有消息全部提示在 id 为 myContainer 里面target:Function(elem){// SEO靠我自己指定消息容器位置var $formitem = $(elem).closest(.form-item),$msgbox = $formitem.find(span.msg-box);if (!$mSEO靠我sgbox.length) {$msgbox = $(<span class="msg-box"></span>).appendTo($formitem);}return $msgbox;},valiSEO靠我d:null,// 默认 表单验证通过时调用此函数invalid: function(form){//表单验证通过时调用此函数// 表单验证通过，提交表单$.post(url, $(form).serSEO靠我ialize() ).done(function(d){// some code});},invalid:null,//表单验证失败后的回调。也可以使用 invalid.form 事件invalid:SEO靠我function(){//$(#form).on(invalid.form, function(e, form, errors){});},validation:null,//验证每个字段后调用此函数SEO靠我validation: function(element, result){$("#submitBtn").prop(disabled, !element.form.isValid)},rules:nSEO靠我ull,//自定义规则rules: {//自定义用于当前实例的规则，支持两种定义方式// 自定义验证函数，具有最大的灵活性myRule: function(el, param, field){//验证SEO靠我并返回布尔值},// 简单配置正则及错误消息another: [/^\w*$/, Please enter the letters or underscore.]},messages:null,//自SEO靠我定义消息messages: {required: "不能为空",email: "请填写正确的邮件地址",myRule:"自定义规则的提示消息"},fields:null,//配置字段规则及参数fielSEO靠我ds: {//为input[name=foo]调用前面定义的两个规则foo: required; myRule[param]; another,username: {//字段规则rule: "姓名: SEO靠我required; myRule; rule2; rule3",//(自定义字段中?)每个规则的错误消息msg: {myRule:"自定义规则的提示消息", #注意这里值为false和""则会显示默认SEO靠我的错误提示required: "请填写姓名",rule2: "xxxx",rule3: "xxxx"},//自定义获得焦点时的友好提示信息tip: "填写真实姓名有助于朋友找到你",//自定义字段验证SEO靠我成功后显示的消息ok: "{0}填写正确", //返回姓名填写正确//是否启用实时验证，默认继承timely: false,//验证当前字段，但是实际上在 target 的元素上提示错误消息//如果目SEO靠我标元素是输入框（input，textarea、select），将会以目标元素为基准点，插入一条消息；//如果目标元素是消息占位（className 为 msg-box），这和直接使用消息占位没有区别/SEO靠我/其他情况下，直接显示在target指向的容器中target: "#msg_holder",//字段验证通过的回调valid:function(form){},//字段验证失败的回调valid:funSEO靠我ction(form){},//使用 dataFilter 回调可以转换 ajax 返回的结果为 nice-validator 支持的格式dataFilter:function(form){},musSEO靠我t:true,//是否强制验证该字段msgWrapper:"span",//自定义该字段的消息容器的标签名msgMaker:"",//自定义该字段的消息生成器 参数？msgClass:"",//自定义SEO靠我该字段的消息Class 在.msg-box消息容器标签上msgStyle:"font-size:14px;",//自定义该字段的消息 CSS 样式 绑定在.msg-box消息容器标签上getValueSEO靠我:function(){},//自定义 value 的 getter 参数？setValue:function(){},//自定义 value 的 setter 参数？},},beforeSubmitSEO靠我 :null,//在提交表单之前调用此函数beforeSubmit:function(form){//一般在提交之前修改某些form元素},dataFilter:null,//转换服务端通过ajax返SEO靠我回的数据为插件支持的格式一般和remote默认规则搭配使用dataFilter:function(data){//假设服务端返回结果为： {"status":600, "msg":"名字已被占用"}iSEO靠我f (data.status === 200) return "";else return data.msg;},//主题相关的参数showOk:true,//默认 是否显示成功提示(前提是有传ok的SEO靠我消息) 返回布尔 或者字符串showOk:false,//如果设置成false在字段验证通过后将只是简单的隐藏消息。showOk:正确,//如果传递一个字符串，在验证通过后将提示这个消息showOk:SEO靠我,//如果设置成空字符串，将只显示一个成功的图标validClass:has-succes, //为验证通过的form表单添加的class名invalidClass:"has-error",//验证不SEO靠我通过的输入框添加的class名bindClassTo:"#verifiable",//设置 validClass 和 invalidClass 添加到的位置formClass:"n-default",SEO靠我 //主题的 class 名称，添加在 form 上msgClass: "n-top", //消息将自动显示在输入框上边msgClass: "n-right", //默认 消息将自动显示在输入框右边mSEO靠我sgClass: "n-bottom", //消息将自动显示在输入框下边msgClass: "n-left", //消息将自动显示在输入框左边msgClass: "n-right myclass", SEO靠我//消息将自动显示在输入框右边，你还可以通过myclass来定义更多样式msgStyle:"margin-left:-10px; margin-top:10px;",//为消息容器 自定义cssmsgSEO靠我Wrapper:"span",//消息容器的元素标签msgMaker:null,//自定义消息 HTML 结构 为false则不生成提示消息msgMaker: function(opt){returnSEO靠我 <span class="+ opt.type +"> + opt.msg + </span>;/* opt包含的子属性

type：消息类型（可能的值为：error / ok / tip / loadSEO靠我ing）

          cls： 即msgClass参数的值

          style： 即msgStyle参数的值

          icon： 即msgIcon参数的值

          arrow： 即msgArrow参数的值

          show： 即msgShow参数的值

hiSEO靠我de： 即msgHide参数的值

以上 msgMaker 配置，将生成如下消息结构<div class="msg-box n-right" for="user[name]"><span class="nSEO靠我-error">Please fill this field.</span></div>*/},msgIcon:"<span class="n-icon"></span>",//自定义消息图标的 HTSEO靠我ML 模板msgArrow:"", //自定义消息箭头的 HTML 模板msgShow:null, //消息提示之前调用此函数msgShow:function($msgbox, type){//},mSEO靠我sgHide:null,//消息隐藏之前调用此函数msgHide:function($msgbox, type){//}});

消息体html结构：

<span class="msg-box" for="SEO靠我quanxian" style=""><span role="alert" class="msg-wrap n-error"><span class="n-icon"></span><span claSEO靠我ss="n-msg">协议必选</span></span></span>

事件：

.on("validation")：描述：每次验证完一个字段，都会触发 validation 事件，通过该事件可以获取到当SEO靠我前验证字段的验证结果。

$(#form).on(validation, function(e, current){var form = this;// form 中是否所有字段都验证通过console.SEO靠我log(form.isValid);// 当前验证字段是否通过console.log(current.isValid);// 打印其他属性console.log(current.element);coSEO靠我nsole.log(current.value);console.log(current.msg);});

.on("valid.form")：在表单验证通过后触发

$(#form).on(valid.fSEO靠我orm, function(e, form){//do something...});

.on("invalid.form")：在表单验证不通过后触发

$(#form).on(invalid.form, SEO靠我function(e, form, errors){//do something...});

.on("valid.field")：在字段验证通过后触发

$(#username).on(valid.fieSEO靠我ld, function(e, result){//do something...});

.on("invalid.field")：在字段验证不通过后触发

$(#username).on(invalid.SEO靠我field, function(e, result){//do something...});

.on("valid.rule")：在规则验证通过后触发

$(#username).on(valid.rulSEO靠我e, function(e, ruleName){if (ruleName === remote) {//do something...}});

.on("invalid.rule")：在规则验证不通过SEO靠我后触发

$(#username).on(invalid.rule, function(e, ruleName){if (ruleName === remote) {//do something...}}SEO靠我);

发布：

.trigger("validate")：手动触发字段执行验证

触发类型//①$input.trigger("validate"); 手动触发元素进行验证//如：手动调用username字段验SEO靠我证$(input[name="username"]).trigger("validate");//②$form.trigger("validate"); v0.7.0+ 手动触发表单进行验证，验证通过SEO靠我后不会自动提交//如：手动调用表单验证$(#form).trigger("validate");//③$form.trigger("submit"); 手动触发表单提交，在提交前会自动验证//如：手动SEO靠我调用表单提交$(#form).trigger("submit");//④$input.trigger("showtip"); v0.5.0+ 触发元素显示tip消息//手动调用验证初始化完成后，立即显SEO靠我示所有字段的提示$(#form).validator().trigger("showtip");

.trigger("showmsg", [type, message])：触发字段提示消息

// 手动调用SEO靠我字段验证成功消息$("#username").trigger("showmsg", ["ok", "Great name"]);// 手动调用input字段验证错误消息$("#username").tSEO靠我rigger("showmsg", ["error", "Name is already taken"]);// 手动调用（input聚焦选中）友好的提示消息$("#username").triggeSEO靠我r("showmsg", ["tip", "Others make a good name for you impressed"]);// 手动调用已经绑定的提示消息 (data-tip)$("#usSEO靠我ername").trigger("showmsg", ["tip"]);// 手动调用所有提示消息$("#form").trigger("showmsg", ["tip"]);

.trigger("hSEO靠我idemsg")：触发字段隐藏消息

// 手动调用隐藏指定字段的消息$("#username").trigger("hidemsg");// 手动调用隐藏整个表单的提示消息$("#form").trigSEO靠我ger("hidemsg");

插件方法：

$(#form1).validator({选项参数})      : 根据参数初始化验证，验证 jQuery 选中的表单

$(#form1).validator(SEO靠我function(){})    : 初始化验证，验证 jQuery 选中的表单，验证通过后执行回调

// 等同于 $(#form1).validator({ valid: function(){}, SEO靠我});

$(#form1).validator(instanceMethod, arg1, arg2... )    :通过.validator() 方法调用实例方法？

// 清空表单验证消息$(#forSEO靠我m1).validator("cleanUp");// 销毁表单验证$(#form1).validator("destroy");

$(#form1).isValid( callback ) 判断某个区SEO靠我域或者某个字段是否验证通过，如果字段中有异步 ajax 验证，需要通过 callback 获取验证结果

// 使用回调函数获取验证结果$(#mobile).isValid(function(v){if SEO靠我(v) {// do something}});// v0.10.5+ 还支持下面这种写法，即回调不带参数，就是验证通过的回调$(#mobile).isValid(function(){// do sSEO靠我omething});// 如果验证的字段中没有 ajax 异步验证，直接获取结果也是可以的if ( $(#mobile).isValid() ) {// do something}

静态方法

$.valSEO靠我idator(selector, options)

// 即使 "#form1" 这个表单被动态加载，也可以验证$.validator("#form1", {timely: 2,stopOnError:SEO靠我 true,fields: {email: "required;email",password: "required;length(6~16)",mobile: "required;mobile"}}SEO靠我);

$.validator.config(options)：配置全局选项   建议配置在 local 配置文件（如：zh-CN.js）中

$.validator.config({timely: 2});SEO靠我 $.validator.config(rules: {mobile: [/^1[3-9]\d{9}$/, "请填写有效的手机号"],chinese: [/^[\u0391-\uFFSEO靠我E5]+$/, "请填写中文字符"]});

$.validator.setTheme(name, options)：配置全局主题    参考配置选项

$.validator.setTheme("myTheSEO靠我me", {formClass: "nice-flat",msgClass: "n-right",timely: 2,stopOnError: true});

instance （实例方法）

.test(SEO靠我elem, rule)：验证字段是否符合指定的规则 返回布尔

$("#myForm").validator({rules: {loginName: function(element) {return /SEO靠我^[a-zA-Z]\w{3,}/.test(element.value)|| this.test(element, "mobile")|| this.test(element, "email")|| SEO靠我Please fill user name, phone number or E-mail;}},fields: {username: "required; loginName",password: SEO靠我"required; length(6~16)"}});

.setField(key, field)：动态配置字段参数

$(form).validator("setField", "username", SEO靠我"required;");// Remove the fields verification.$(form).validator("setField", "username", null);

.setFSEO靠我ield(obj)：动态配置字段参数

$(form).validator("setField", {username: "required;username",pwd: "required;passwoSEO靠我rd"});

.showMsg(elem, obj)：使字段提示消息（不推荐），推荐使用.trigger("showmsg")

.hideMsg(elem)：使字段隐藏消息（不推荐），推荐使用.triggSEO靠我er("hidemsg")

.holdSubmit(hold)：防止表单重复提交的措施

$("#myForm").validator({valid: function(form){var me = thiSEO靠我s;// Before submitting the form, hold form, to prevent duplicate submission.me.holdSubmit();$.ajax({SEO靠我url: "xxx.php",data: $(form).serialize(),type: "POST",success: function(){// After the form is submiSEO靠我tted successfully, release hold.me.holdSubmit(false);}});}});

.cleanUp()：清除表单中的全部验证消息

$(#form1).validaSEO靠我tor(cleanUp);

.destroy()：销毁表单验证实例

$(#form1).validator(destroy);

内置规则：

required - 使字段必填 适用于 input、textareSEO靠我a、select(注意 ："：filled" 是一个jquey的选择器扩展，匹配填充值了的表单元素，用法和:checked、:radio、:checkbox一致)

①required②required(SEO靠我"input:filled" )、required(#id:checked)、required(#id:enabled)、...③required(ruleName) 满足规则（某个默认规则自定义规则SEO靠我） ruleName 则字段必填④required(from, class, count) ：className 为 contact 的字段至少填写一个eg：<input class="contactSEO靠我" name="mobile" placeholder="手机号"data-rule="required(from, .contact); mobile"data-msg-required="请至少填SEO靠我写一种联系方式"><input class="contact" name="tel" placeholder="电话"data-rule="required(from, .contact); tel"SEO靠我><input class="contact" name="email" placeholder="邮箱"data-rule="required(from, .contact); email">⑤reSEO靠我quired(not, value) 必填但排除value

checked - 必选，还可以控制选择项目的数量

规则 描述checked 必选checked(n) 必选 n 项checked(n~) 至少SEO靠我选择 n 项checked(~n) 最多选择 n 项checked(n1~n2) 选择 n1 到 n2 项

match - 当前字段与另一个字段比较

规则 描述match(name) 当前字段值必须和 nSEO靠我ame 字段的值匹配match(eq, name) 同上match(neq, name) 当前字段值必须和 name 字段值不同match(lt, name) 当前字段值必须小于 name 字段值maSEO靠我tch(gt, name) 当前字段值必须大于 name 字段值match(lte, name) 当前字段值必须小于等于 name 字段值match(gte, name) 当前字段值必须大于等于 naSEO靠我me 字段值match(gte, name, date) 当前日期值必须大 于等于 name 字段日期值match(gte, name, datetime) 当前时间值必须大于等于 name 字段时间SEO靠我值

remote - 获取服务器端验证的结果

remote(url)remote(get:URL) 默认postremote(cors:post:/user/checkName) 强制跨域<input tSEO靠我ype="text" name="username"data-rule="required;remote({:U(User/test)})">然后经过user控制器test方法处理后返回返回是字符串：SEO靠我返回" ":通过； 不为空 则 将作为错误信息输出返回json时：// 验证通过{"ok": "名字很棒"} //$msg[ok]="名字很棒";echo json_encode($msg);// 验SEO靠我证不通过{"error": "名字已被占用"} //$msg[error]="名字已被占用";echo json_encode($msg);// 结果在第二级 data{"status": 200, SEO靠我"data": {"error": "名字已被占用"}}

integer - 只能填写整数

规则 描述integer 整数integer(+) 正整数integer(+0) 正整数和零integer(-)SEO靠我 负整数integer(-0) 负整数和零

range - 只能填写指定范围的数

规则 描述range(n~) 请填写不小于 n 的数range(~n) 请填写不大于 n 的数range(n1~n2) 请SEO靠我填写 n1 到 n2 的数range(n1~n2, false) 请填写 n1 到 n2 的数（不包含边界值）(v0.9.0+)

length - 字段值必须符合指定长度

规则 描述length(n) 请SEO靠我填写 n 个字符length(n~) 请至少填写 n 个字符length(~n) 请最多填写 n 个字符length(n1~n2) 请填写 n1 到 n2 个字符length(n~, true) 请至SEO靠我少填写 n 个字符（全角字符计算双字符）

filter - 过滤当前字段的值，不做验证

规则 描述filter 过滤 <>`" 和字符实体编码的字符filter(RegExp) 自定义过滤正则

验证方式：

例SEO靠我1. DOM传参    DOM 绑定规则，无需 JS 代码

1. 要验证一个表单，只需要给字段绑定规则“data-rule”就可以了2. 字段可以有多条规则，规则之间用分号（;）分隔3. js初始化不是SEO靠我必要的，只要是字段并且带有“data-rule”属性，即使是新插入的一段DOM也可以立马验证4. 其中：required是内置规则（核心自带），username、password是配置文件中设置的全局SEO靠我规则（配置文件）<form id="demo_11" action="results.php" method="post" autocomplete="off"><fieldset><p><inputSEO靠我 name="user[name]" data-rule="required;username" placeholder="用户名"></p><p><input name="user[pwd]" daSEO靠我ta-rule="required;password" placeholder="密码"></p></fieldset><button type="submit">提交</button></form>SEO靠我<input type="text" name="username" data-rule="required;"> :提示 此处不能为空<input type="text" name="usernamSEO靠我e" data-rule="用户名:required;"> :提示 用户名不能为空<input type="text" name="username"data-rule="required;"dataSEO靠我-tip="输入你的名字与姓氏。" 可选：聚焦提示data-ok="名字很棒。" 可选：默认为一个绿色的勾data-msg-required="全名必填!" 可选：data-msg-指定的规则 默认错SEO靠我误只显示红色的X>

例2. js传参（这和上面的DOM传参等价）  JS 配置规则，无侵入 DOM

HTML<form id="demo_12" action="results.php" method="SEO靠我post" autocomplete="off"><fieldset><p><input name="user[name]" placeholder="用户名"></p><p><input name=SEO靠我"user[pwd]" placeholder="密码"></p></fieldset><!--button type="submit">提交</button--><a href="javascripSEO靠我t:" class="submit-btn">提交</a></form>Javascript$(#demo_12).validator({fields: {user[name]: required; SEO靠我username;,user[pwd]: required; password;}})// 使用链接代替submit按钮（注意：这种情况下输入框里面的回车键不能触发submit事件）$("#xxoo"SEO靠我).on("click", "a.submit-btn", function(e){$(e.delegateTarget).trigger("submit");});

例3. radio的必选

1. 对于SEO靠我checkbox和radio，要“必填”的话，不能使用“required”，而是使用“checked”2. 你只需要在第一个checkbox或者radio上面绑定规则就可以了3. 消息会自动生成，并且SEO靠我显示在最后面，你无需关注消息怎么显示<form id="demo_51" action="results.php" method="post" autocomplete="off"><fieldsetSEO靠我><label class="form-label">性别：</label><label><input type="radio" name="gender" value="1" data-rule="SEO靠我checked">男</label><label><input type="radio" name="gender" value="2">女</label><label><input type="raSEO靠我dio" name="gender" value="0">保密</label></fieldset><div class="form-submit"><button type="submit">提交<SEO靠我/button></div></form><form id="demo_52" action="results.php" method="post" autocomplete="off"><fieldSEO靠我set><label class="form-label">兴趣：</label><label><input type="checkbox" name="interest[]" value="0" dSEO靠我ata-rule="checked">看书</label><label><input type="checkbox" name="interest[]" value="1">上网</label><laSEO靠我bel><input type="checkbox" name="interest[]" value="2">睡觉</label><label><input type="checkbox" name=SEO靠我"interest[]" value="3">运动</label><label><input type="checkbox" name="interest[]" value="4">发呆</labelSEO靠我></fieldset><div class="form-submit"><button type="submit">提交</button></div></form>

控制选中项目数

1. checkedSEO靠我[2~]表示选择的项目要在2项以上

2. 不要对:radio使用参数，因为本身就是单选，直接checked就可以了

<form id="demo_53" action="results.php" methSEO靠我od="post" autocomplete="off">

<fieldset>

<label class="form-label">兴趣：</label>

<label><input type="checSEO靠我kbox" name="interest[]" value="0" data-rule="checked[2~]">看书</label>

<label><input type="checkbox" naSEO靠我me="interest[]" value="1">上网</label>

<label><input type="checkbox" name="interest[]" value="2">睡觉</laSEO靠我bel>

<label><input type="checkbox" name="interest[]" value="3">运动</label>

<label><input type="checkboxSEO靠我" name="interest[]" value="4">发呆</label>

</fieldset>

<div class="form-submit">

<button type="submit">提交SEO靠我</button>

</div>

</form>

例4. Ajax提交表单

1. 可以通过valid参数传入回调，参见配置

2. 也可以直接接收valid.form事件（下面例子采用接收事件的方式），参见事件HSEO靠我TML<div id="result_14" class="tip-ok" style="display:none">提交成功</div><form id="demo_14" autocompleteSEO靠我="off"data-validator-option="{theme:simple_right}"><fieldset><p><input name="username" data-rule="用户SEO靠我名:required;username" placeholder="用户名"></p><p><input name="password" data-rule="密码:required;passwordSEO靠我" placeholder="密码"></p></fieldset><button type="submit">提交</button></form>Javascript//接收表单验证通过的事件$(#SEO靠我demo_14).bind(valid.form, function(){$.ajax({url: results.php,type: POST,data: $(this).serialize(),sSEO靠我uccess: function(d){$(#result_14).fadeIn(300).delay(2000).fadeOut(500);}});});

自定义规则：

注意：自定义规则如果与内置规则同SEO靠我名，则自定义规则优先

通过 DOM 方式自定义规则（只对当前字段有效）

<input name="demo" data-rule="required; xxx" data-rule-xxx="[/^\d{SEO靠我6}$/, 请输入6位数字]">

通过 rules 配置规则（当前表单实例有效）

<input name="demo">$(#form1).validator({rules: {// 使用正则表达式定义规SEO靠我则mobile: [/^1[3-9]\d{9}$/, "请填写有效的手机号"],// 使用函数定义规则xxx: function(elem, param) {return /^1[3458]\d{9}SEO靠我$/.test($(elem).val()) || 请检查手机号格式;}},fields: {// 对字段 username 应用规则 mobileusername: required;mobile}SEO靠我});

全局规则：

提交方式：

提交方式1：表单验证通过后自动原生方式提交

<form id="form1" action="register.php"><label>Email</label><input SEO靠我type="email" name="email" data-rule="required;email"><label>Password</label><input type="password" nSEO靠我ame="pwd" data-rule="required;length(6~16)"><button type="submit">提交</button></form>

提交方式2：js使用验证通过回调SEO靠我

$(#form1).validator({valid: function(form) {// do something// use native submit.form.submit();}});

提交SEO靠我方式3：绑定表单验证通过的事件（参考：valid.form事件）

$(#form1).on(valid.form, function(e){// You can do something, then sSEO靠我ubmit form by native// this.submit();// or use ajax submit$.post("path/to/server", $(this).serializeSEO靠我()).done(function(d){// some code});});