jQuery validate插件实现ajax验证重复的2种方法
本文实例讲述了jQueryvalidate插件实现ajax验证重复的2种方法。分享给大家供大家参考，具体如下：
jqueryvalidate经过这种多年的改良，已经很完善了。它能满足80%的验证需要，如果validate自带的功能，不能满足我们需求，它提供了addMethod来扩展功能。下面就举个小例子来说明一下addMethod的用法。
完整demo实例代码如下：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>jqueryvalidateajaxcheckexist</title>
<head>
<scripttype="text/javascript"src="jquery.min.js"></script>
<scripttype="text/javascript"src="jquery.validate.min.js"></script>
<script>
$(document).ready(function(){
jQuery.validator.addMethod("phonecheck",function(value,element){
string=value.match(/0(\d{2,2})-(\d{7,7})/ig);
if(string!=null){
returntrue;
}else{
returnfalse;
}
},"telphonenumberlike021-1234567");
jQuery.validator.addMethod("phonesame",function(value,element){
varflag=1;
$.ajax({
type:"POST",
url:'tel.php',
async:false,
data:{'tel':value},
success:function(msg){
if(msg=='yes'){
flag=0;
}
}
});
if(flag==0){
returnfalse;
}else{
returntrue;
}
},"sorrynumberhavebeenexist");
$("#myform").validate({
errorPlacement:function(error,element){
error.insertAfter(element);
},
rules:{
username:{
required:true,
remote:{
url:"tel.php",
type:"post",
dataType:"html",
data:{
username:function(){return$("#username").val();}
},
dataFilter:function(data,type){
if(data=="yes")
returntrue;
else
returnfalse;
}
}
},
telphone:{
required:true,
rangelength:[11,11],
phonecheck:true,
phonesame:true
}
},
messages:{
telphone:{
required:"Pleaseenteryourphone",
rangelength:"phonemustbe11numbers"
},
username:{
required:"Pleaseenteryourusername",
remote:"theusernamehavebeenexist"
}
},
debug:true
})
});
</script>
</head>
<bodystyle="margin-left:500px;margin-top:100px;">
<divstyle="font-size:24px;">021-1234567ortankexist</div><br>
<formid="myform"method="post">
<label>Yourtelphone</label>
<inputname="telphone"class="required"value=""/><br><br>
<label>Yourusername</label>
<inputname="username"id="username"class="required"value=""/>
<br/>
<inputtype="submit"value="Submit"/>
</form>
</body>
</html>
在这里推荐大家使用jqueryvalidate，用熟了，很方便。
更多关于jQuery插件相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。