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

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

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

 

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

 $(document).ready(function(){

  jQuery.validator.addMethod("phonecheck", function(value, element) {   //添加一个phonecheck方法，来自定义check规则
      string = value.match(/0(d{2,2})-(d{7,7})/ig);
      if(string != null){
          return true;
      }else{
          return false;
      }
  }, "telphone number like 021-1234567");

  jQuery.validator.addMethod("phonesame", function(value, element) {    //用jquery ajax的方法验证电话是不是已存在
      var flag = 1;
      $.ajax({
          type:"POST",
          url:'tel.php',
          async:false,                                             //同步方法，如果用异步的话，flag永远为1
          data:{'tel':value},
          success: function(msg){
               if(msg == 'yes'){
                   flag = 0;
               }
          }
      });

      if(flag == 0){
          return false;
      }else{
          return true;
      }

  }, "sorry number have been exist");

  $("#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")
                          return true;
                      else
                          return false;
                 }
              }
             },
          telphone:{
              required:true,
              rangelength:[11,11],
              phonecheck:true,
              phonesame:true
          }
      },
      messages:{
          telphone:{
              required:"Please enter your phone",
              rangelength:"phone must be 11 numbers"
          },
          username:{
              required:"Please enter your username",
              remote:"the username have been exist"
          }
      },
     debug:true
   })
});
</script>

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

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