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

张映 发表于 2012-11-27

分类目录: nodejs/vue/js/jquery

标签:, , ,

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/1484.html

1 条评论

  1. sor 留言

    哥们 感谢你的例子 之前一直在想怎么先正则再ajax验证 在这里才发现依此调用就可以了 哈哈