jquery validate remote扩展使用

jquery的validate功能可以方便的用来验证前端数据，有些时候验证数据需要提交后端进行验证，可以使用validate的remote的功能，代码如下：

$('#firstForm').validate({
            rules: {
                account: {
                    hasselected: true
                },
                amount: {
                    required: true,
                    isValidAmount: true,
                    maxlength: 13

                },
                validatecode:{
                    required:true,
                   remote:{
                         type:"POST",
                         url:"",
                         date:{name:function(){return $("#validate").val();}}

}

},
},

            messages: {
                account: {
                    hasselected: "请选择帐号！"
                },
                amount: {
                    required: "金额不能为空！",
                    isValidAmount: "金额输入错误，请重新输入！",
                    maxlength: "金额已超出最大长度"
                },
                validatecode:{
                    required:"未填写验证码!",
            remote:jQuery.format("验证码错误")
                }
            },
            errorElement: "span",
            errorPlacement: function (error, element) {
                //查找到需要容纳并显示错误信息的dom元素
                //var attentionElement = $(element).next().children('.ui-tiptext-error');
                var attentionElement = $(element).parent().parent().find('.ui-tiptext-error');
                attentionElement.show();
                //传过来的error是包含span标签的错误信息，如果要去掉标签，用正则表达式即可
                attentionElement.find("span").html(error);
            },
            showErrors: function (errorMap, errorList) {
                if (errorList && errorList.length > 0) {
                    $.each(errorList, function (index, obj) {
                        $(obj.element).parent().next().children('.ui-tiptext-error').show();
                    });
                    this.defaultShowErrors();
                } else {
                    $(this.currentElements).parent().next().children('.ui-tiptext-error').hide();
                }
            },
            onkeyup: false,
            focusInvalid: false
        });

但是这样使用时候url返回值必须为true和false，否则就需要自定义扩展，定义verifyValidate方法

                },
                validatecode:{
                    required:true,
                    verifyValidate:true

},
},

扫描二维码关注公众号，回复： 12525723 查看本文章

jQuery.validator.addMethod("verifyValidate", function(value, element) {
   var flag = true;
   // ajax获取
   $.ajax({
       type : 'POST',
       url : "",
       dataType : 'json',
       async : false,
       cache : false,
       data : "valid=" + value,
       success : function(data) {
           console.log("验证验证码" + data);
           var code = data.code;
           if(code=='00000'){
               flag = true;
           }else if(code=='00001'){
               flag = false;
               $('#img').attr('src', '/url?' + new Date().getTime());
               $('#msg').html("验证码已失效");
               $('.msg').show();
           }else if(code=='00002'){
               flag = false;
               $('#img').attr('src', '/url?' + new Date().getTime());
               $('#msg').html("验证码错误");
               $('.msg').show();
           }
       }
   });
   return flag;
}, "");

jquery validate remote扩展使用

猜你喜欢