码迷,mamicode.com
首页 > Web开发 > 详细

jQuery.validator.addMethod自定义验证

时间:2017-08-04 13:55:50      阅读:260      评论:0      收藏:0      [点我收藏+]

标签:func   optional   resolved   date   method   letter   方式   传递参数   名称   

jQuery.validator.addMethod("numOrLetter", function(value, element) {
return this.optional(element) || /^[0-9|A-Z|a-z]+$/.test(value);
}, "请输入数字或字母");

$("#inputForm").validate({
    rules : {
        //要校验的表单名称
        operationCode : {
            //自定义的校验规则
            numOrLetter:true,
            //ajax校验,通过后台服务校验用户所输内容是否已在数据库中存在,后台服务只需要返回true或false即可,boolean类型,String类型都可
             remote:{
                //这里通过get方式,参数放在Url后,刚开始?后写了operationCode=,请求发送后,url变成?operationCode=&operationCode=value
                //所以就去掉了
                url:"${ctx}/operation/operation/validateCode?" + $("#operationCode").val(),
                type:"GET",
                dataType:"json"
                //POST方式时,可以通过
                //data:{paramName:value,...}传递参数
            }
        }
    },
    messages:{
        operationCode:{
            //这里指定出错信息
            remote:"指定的编号已存在"
        }
    }
});


ajax校验,可以使用自带的remote,也可以通过addMethod()添加


jQuery.validator.addMethod("checkUnique", function(value, element) {
    var deferred = $.Deferred();//创建一个延迟对象
    $.ajax({
        url:"${ctx}/operation/operation/listJson?operationCode="+value,
        async:false,//要指定不能异步,必须等待后台服务校验完成再执行后续代码
        dataType:"json",
        success:function(page) {
            var len = page.rows.length;
            if (len > 0) {
                deferred.reject();
            } else {
                deferred.resolve();   
            }
        }
    });
    //deferred.state()有3个状态:pending:还未结束,rejected:失败,resolved:成功
    return deferred.state() == "resolved" ? true : false;
}, "编号已存在");


通过addMethod()添加的ajax校验比remote的好处:
remote()请求的服务返回结果必须为boolean或String类型的 true或false,这样要校验的话,后台必须添加这样的服务
addMethod(),使用$.ajax()就可以在success中对服务返回的数据进行处理判断来,这样就把后台的工作(返回true,false)转到前台了

jQuery.validator.addMethod自定义验证

标签:func   optional   resolved   date   method   letter   方式   传递参数   名称   

原文地址:http://www.cnblogs.com/pzx-java/p/7284429.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!