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
}
以上就是本文的全部内容，希望能给大家一个参考，也希望大家多多支持毛票票。