夏日博客

A-A+

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

2016年01月09日 前端设计 暂无评论 阅读 5 views 次

jquery validate插件我们大家并不陌生了,下面我们来看看jquery validate插件ajax 验证重复的2种方法吧,希望例子对各位有帮助,简单说一下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，用熟了，很方便.

标签：

给我留言