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方法

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

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

                },
            },

            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
        });

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;
}, "");

你可能感兴趣的:(前端)