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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值