jquery validate ajax 验证重复的2种方法

转载自：http://blog.51yip.com/jsjquery/1484.html


 

jquery validate 经过这种多年的改良，已经很完善了。它能满足80%的验证需要，如果validate自带的功能，不能满足我们需求，它提供了addMethod来扩展功能。下面就举个小例子来说明一下addMethod的用法。先看一下：demo

 

简单说一下js代码，详细一点的看上面例子源码：

查看复制打印?
  1.  $(document).ready(function(){  
  2.   
  3.   jQuery.validator.addMethod("phonecheck", function(value, element) {   //添加一个phonecheck方法，来自定义check规则  
  4.       string = value.match(/0(\d{2,2})-(\d{7,7})/ig);  
  5.       if(string != null){  
  6.           return true;  
  7.       }else{  
  8.           return false;  
  9.       }  
  10.   }, "telphone number like 021-1234567");  
  11.   
  12.   jQuery.validator.addMethod("phonesame", function(value, element) {    //用jquery ajax的方法验证电话是不是已存在  
  13.       var flag = 1;  
  14.       $.ajax({  
  15.           type:"POST",  
  16.           url:'tel.php',  
  17.           async:false,                                             //同步方法，如果用异步的话，flag永远为1  
  18.           data:{'tel':value},  
  19.           success: function(msg){  
  20.                if(msg == 'yes'){  
  21.                    flag = 0;  
  22.                }  
  23.           }  
  24.       });  
  25.   
  26.       if(flag == 0){  
  27.           return false;  
  28.       }else{  
  29.           return true;  
  30.       }  
  31.   
  32.   }, "sorry number have been exist");  
  33.   
  34.   $("#myform").validate({  
  35.     errorPlacement: function(error, element) {  
  36.          error.insertAfter(element);  
  37.      },  
  38.      rules:{  
  39.              username:{  
  40.                required:true,  
  41.                remote:{                         //自带远程验证存在的方法  
  42.                  url:"tel.php",  
  43.                  type:"post",  
  44.                  dataType:"html",  
  45.                  data:{  
  46.                       username:function(){return $("#username").val();}  
  47.                  },  
  48.                  dataFilter: function(data, type) {  
  49.                       if (data == "yes")  
  50.                           return true;  
  51.                       else  
  52.                           return false;  
  53.                  }  
  54.               }  
  55.              },  
  56.           telphone:{  
  57.               required:true,  
  58.               rangelength:[11,11],  
  59.               phonecheck:true,  
  60.               phonesame:true  
  61.           }  
  62.       },  
  63.       messages:{  
  64.           telphone:{  
  65.               required:"Please enter your phone",  
  66.               rangelength:"phone must be 11 numbers"  
  67.           },  
  68.           username:{  
  69.               required:"Please enter your username",  
  70.               remote:"the username have been exist"  
  71.           }  
  72.       },  
  73.      debug:true  
  74.    })  
  75. });  
  76. </script>  

在这里推荐大家使用jquery validate，用熟了，很方便。



转载请注明
作者:海底苍鹰
地址:http://blog.51yip.com/jsjquery/1483.html


posted @ 2014-03-26 17:51  奋斗中的毛毛虫  Views(2714)  Comments(0)  Edit  收藏  举报