jquery.validate使用详解
一、简单应用实例:
1.用class样式进行验证,用法简单,但不能自定义错误信息,只能修改jquery-1.4.1.min.js中的内置消息,也不支持高级验证规则。
<scripttype="text/javascript"language="javascript"src="https://www.nhooo.com/Scripts/jquery-1.4.1.min.js"></script> <scripttype="text/javascript"language="javascript"src="https://www.nhooo.com/Scripts/jquery.validate.min.js"></script> <h2>ValidateTest</h2> <formid="loginForm"action="post"> <tableborder="0"cellpadding="0"cellspacing="0"> <tr> <td> <inputtype="text"id="UserEmail"class="requiredemail"/></td> </tr> <tr> <td> <inputtype="password"id="Password"class="required"/></td> </tr> <tr> <td> <inputtype="submit"value="submit"onclick="checkInput();"/> </td> </tr> </table> </form> <scriptlanguage="javascript"type="text/javascript"> functioncheckInput(){ if($("#loginForm").valid()){ returntrue; } returnfalse; } </script>
当然,如果不希望使用onclick事件进行提交验证,也可以在页面加载时加上jQuery的监控,代码如下:
$(document).ready(function(){ jQuery("#loginForm").validate(); });
这时就不需要在提交按钮上加onclick="checkInput();"这个事件了。
2.使用Json字符串验证,使用该规则验证,必须额外引入jquery.metadata.pack.js文件
修改上面的两个INPUT如下:
<inputtype="text"id="UserEmail"class="{validate:{required:true,email:true}}"/> <inputtype="password"id="Password"class="{validate:{required:true,minlength:6,messages:{required:'请输入密码',minlength:'密码至少6位'}}}"/>
可以看到,我们已经可以自定义错误消息了。
另外必须在页面中加上以下代码:
$(document).ready(function(){ $("#loginForm").validate({ meta:"validate" }); });
二、验证规则的应用
1.使用class验证的规则:
在class中可以使用:required,email,number,url,date,dateISO,dateDE,digits,creditcard,phoneUS
可以增加属性:minlength,maxlength,min,max,accept,remote(注:请检查是否返回是bool还是xml),equalTo='#password'
没有找到使用办法的内置方法:required(dependency-expression),required(dependency-callback),range,rangelength
2.使用Json对象验证的规则:
在class中进行如下定义:class=“{validate:{required:true,minlength:6,messages:{required:'请输入密码',minlength:'密码太短啦至少6位'}}}”
我们仍可进行以下定义:number:true,email:true,url:true,date:true,dateISO:true,dateDE:true,digits:true,creditcard:true,phoneUS:true
min:3,max:10,minlength:3,maxlength:10,required:'#other:checked'【此处表达式函数为required(dependency-expression)】
相比使用class来说,我们已经可以使用range方法了,可定义为数字range:[3,10],字符串长度rangelength:[3,10],remote:url,accept:'.csv|.jpg|.doc|.docx',equalTo:'#Password'
没有找到使用方法的内置方法:required(dependency-callback)
三、高级验证方法
在前面说到的简单验证中,使用起来非常简单,有些傻瓜式的味道,但毕竟有些内置规则不能使用。但要想做到灵活运用,还是需要通过JS编码来完成。这样不但所有的内置规则可以使用,而且我们还可以自定义验证规则。以下实例我从易到难逐个列出:
1.编写JS的简单方法
仍以登录验证为例:
<scripttype="text/javascript"language="javascript"src="https://www.nhooo.com/Scripts/jquery-1.4.1.min.js"></script> <scripttype="text/javascript"language="javascript"src="https://www.nhooo.com/Scripts/jquery.validate.min.js"></script> <h2>Validate-High</h2> <formaction=""id="loginForm"method="post"> <tableborder="0"cellpadding="0"cellspacing="0"> <tr> <td> <inputtype="text"id="UserEmail"/> </td> </tr> <tr> <td> <inputtype="password"id="Password"/> </td> </tr> <tr> <td> <inputtype="submit"value="submit"/> </td> </tr> </table> </form> <scriptlanguage="javascript"type="text/javascript"> $(document).ready(function(){ varvalidateOpts={ rules:{ UserEmail:{ required:true, email:true }, Password:{ required:true } }, messages:{ UserEmail:{ required:"请输入邮箱地址", email:"邮箱地址不正确" }, Password:{ required:"请输入密码" } } }; $("#loginForm").validate(validateOpts); }); </script>
我们只需设置validate的参数即可。
2.equalTo的使用,一般在注册时会用到
<scripttype="text/javascript"language="javascript"src="https://www.nhooo.com/Scripts/jquery-1.4.1.min.js"></script> <scripttype="text/javascript"language="javascript"src="https://www.nhooo.com/Scripts/jquery.validate.min.js"></script> <h2>ValidateHigh</h2> <formaction=""id="loginForm"method="post"> <tableborder="0"cellpadding="0"cellspacing="0"> <tr> <td> <inputtype="text"id="UserEmail"/> </td> </tr> <tr> <td> <inputtype="password"id="Password"/> </td> </tr> <tr> <td> <inputtype="password"id="RePassword"/> </td> </tr> <tr> <td> <inputtype="submit"value="submit"/> </td> </tr> </table> </form> <scriptlanguage="javascript"type="text/javascript"> $(document).ready(function(){ varvalidateOpts={ rules:{ UserEmail:{ required:true, email:true }, Password:{ required:true }, RePassword:{ equalTo:"#Password" } }, messages:{ UserEmail:{ required:"请输入邮箱地址", email:"邮箱地址不正确" }, Password:{ required:"请输入密码" }, RePassword:{ equalTo:"两次输入密码必须相同" } } }; $("#loginForm").validate(validateOpts); }); </script>
3.required(dependency-callback)的使用,绿色字体。
varvalidateOpts={ rules:{ age:{ required:true, min:3 }, parent:{ required:function(element){ return$("#age").val()<13; } } } }
4.自定义规则,使用addMethod方法,如下:
//方法接收三个参数(value,element,param)
//value是元素的值,element是元素本身param是参数,我们可以用addMethod来添加除built-inValidationmethods之外的验证方法
//比如有一个字段,只能输一个字母,范围是a-f,写法如下
$.validator.addMethod("af",function(value,element,params){ if(value.length>1){ returnfalse; } if(value>=params[0]&&value<=params[1]){ returntrue; }else{ returnfalse; } },"必须是一个字母,且a-f");
这样我们就可以在rules中加上这个规则,如下
varvalidateOpts={ rules:{ selectorId:{ af:["a","f"]//如果只有一个参数,直接写,如果af:"a",那么a就是这个唯一的参数,如果多个参数,用在[]里,用逗号分开 } } }
另外,经过试验,在Json方式中,我们可以使用af:['a','f'],这个验证可以起作用,在class方式中,在某个元素上增加af='af',验证也可以起到作用。
5.ajax验证,使用remote
remote:{ url:"CheckEmail", type:"post", dataType:"json" }
如果我们验证的方法是返回Boolean类型,这个方法是没有问题的。但很多时候我们可能返回的信息会更多,或者返回其它类型,这时我们可以重新定义一个新的remote方法,示例如下(返回一个Json对象):
$.validator.addMethod("jsonremome",function(value,element,param){ if(this.optional(element)) return"dependency-mismatch"; varprevious=this.previousValue(element); if(!this.settings.messages[element.name]) this.settings.messages[element.name]={}; previous.originalMessage=this.settings.messages[element.name].remote; this.settings.messages[element.name].remote=previous.message; param=typeofparam=="string"&&{url:param}||param; if(previous.old!==value){ previous.old=value; varvalidator=this; this.startRequest(element); vardata={}; data[element.name]=value; $.ajax($.extend(true,{ url:param, mode:"abort", port:"validate"+element.name, dataType:"json", data:data, success:function(response){ validator.settings.messages[element.name].remote=previous.originalMessage; //varvalid=response===true; varvalid=response.Result===true; if(valid){ varsubmitted=validator.formSubmitted; validator.prepareElement(element); validator.formSubmitted=submitted; validator.successList.push(element); validator.showErrors(); }else{ varerrors={}; //varmessage=(response.Message||validator.defaultMessage(element,"jsonremote")); varmessage=response.Message||"远程验证未通过"; errors[element.name]=$.isFunction(message)?message(value):message; validator.showErrors(errors); } previous.valid=valid; validator.stopRequest(element,valid); } },param)); return"pending"; }elseif(this.pending[element.name]){ return"pending"; } returnprevious.valid; });
服务器端方法如下(MVC中):
publicJsonResultCheckEmail(stringUserEmail) { returnnewJsonResult{Data=new{Result=false,Message="Pleasechangethefiled"}}; }
我们就可以使用jsonremote来取代remote方法了。当然,remote方法依然可以使用。
6.错误显示规则
varvalidateOpts={ wrapper:"div",//defaulthasnowrapper errorClass:"invalid",//thedefaultvalueiserror errorElement:"em",//defaultvalueislable errorLabelContainer:"#messageBox",//togatheralltheerrormessages }
以上就是本文的全部内容,希望能给大家一个参考,也希望大家多多支持毛票票。