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程序设计有所帮助。