zoukankan      html  css  js  c++  java
  • 关于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
  • 相关阅读:
    JavaScript常用设计模式
    js 判断l对象类型
    JavaScript编程(终极篇)
    微信小程序开发-滑动操作
    解决Jquery向页面append新元素之后事件的绑定问题
    C# list与数组互相转换
    C# “贝格尔”编排法
    C#数字格式化
    SQL从一个表查询数据插入/更新到另一个表
    全局唯一标识符 (GUID)
  • 原文地址:https://www.cnblogs.com/sllzhj/p/13297599.html
Copyright © 2011-2022 走看看