• 关于bootstrapValidator 表单校验remote出现两次重复提交才能验证通过问题处理


    使用bootstrapValidator插件校验编号,姓名唯一性,发现该插件在使用remote属性出现两次点击提交按钮才能通过验证。

    原因:remote里面请求后台默认是异步请求的,而且还不能同步请求,bootstrapValidator没有等ajax拿到返回值就直接拿了一个默认值false导致的该问题;

    在网上看了很多文章都没有正确的解决方法,已下是我的处理方式:

    使用callback属性代替remote属性实现灵活的请求校验。

    平常的写法:

    name : {
                    group : '.col-sm-6',
                    validators : {
                        notEmpty : {
                            message : '请填写名称'
                        },
                        stringLength: {
                            max: 45,
                            message: '输入长度不得超过45位'
                        },
                       
                        remote : {
                            url: aicDb + 'categoryCodeAction!checkExists.action',
                            message:'已存在',
                            type: 'post',
                            data:function(validator) {
                                return {
                                    usetype: $('#usetype').val(),
                                    id:$('#elementID').val()
                                };
                            }
                        } 
                    }
                },
    

      修改后的代码

    name : {
                    group : '.col-sm-6',
                    validators : {
                        notEmpty : {
                            message : '请填写名称'
                        },
                        stringLength: {
                            max: 45,
                            message: '输入长度不得超过45位'
                        },
                      
                        callback: {
                            message: '已存在',
                            callback: function (value, validator) {
                                console.log(value);
                                var flag = false;
                                $.ajax({
                                    url:aicDb + 'categoryCodeAction!checkExists.action', // 请求路径
                                    type:'POST',
                                    async:false,	// 同步请求,必须是false
                                    data: {
                                        name: value,
                                        usetype: $('#usetype').val(),
                                        id:$('#elementID').val()
                                    },
                                    success:function(res){
                                        flag = res.valid;
                                    }
                                });
                                return flag
                            }
                        },
                    }
                },
    

      将remote改为callback中即可

    注意: 此处callback 的 async必须是同步的

    async:false,	// 同步请求,必须是false
  • 相关阅读:
    HZOJ 太阳神
    HZOJ Silhouette
    HZOJ Dash Speed
    HZOJ 巨神兵
    值得纪念的cspsAFO总结
    11月FLAG
    模板易错总结
    树 总结
    DP总结(优化等)
    代码低级错误总结
  • 原文地址:https://www.cnblogs.com/sllzhj/p/13297599.html
Copyright © 2020-2023  润新知