layui弹框里的表单提交,要加验证还要加禁止连续点击提交这两个需求没法同时实现

提问 已结 14 181
jrxiang
jrxiang 7天前
悬赏:20飞吻
版本:layui 浏览器:
最近在做的项目,form表单在弹框里面,我的做法是,open里面加两个btn,保存和取消按钮,而且刚把验证加上,但是呢,还要做禁止连续点击的功能,所以由于保存按钮是用a标签做的,不能添加disabled事件,所以出了问题,导致这两个功能不能兼顾,但是现在想要换成button事件,套了一下没啥头绪,希望有人能指点一下.
回帖
  • jrxiang
    7天前
    @再来一哦 我跟你的想法是一样的,只不过我是先把开关设为false,如果是false的话 我提交表单,返回信息之后变成true,弹框关闭之后变成false,以便下次打开弹框编辑.
    0 回复
  • jrxiang
    7天前
    @再来一哦 我解决了,我把那个开关放在全局里了,然后测试了一下可以禁止连续点击,也可以为空的时候验证
    0 回复
  • jrxiang
    7天前
    解决了,附上解决方法:
    var isSwitch = false;//全局设置开关;
    //验证
    form.verify({
    required1:function (value,item) {
    pline=$(item).parents('.layui-inline,.layui-form-item,.layui-input-block').find('.layui-form-label').text();
    var labelText = pline.substr(0,pline.length-1);
    if(pline){
    if(!value){
    return '必填项 <span style="font-weight:bold;font-size:18px;">'+labelText + '</span> 为空';
    }else if(!isSwitch){//必须加,这个是禁止连续点击的
    return false
    }
    }
    }
    })
    form.on('submit(editDialog)', function(data){
    if(!isSwitch){
    //随便举个请求的例子
    $.ajax({
    //在这我只写回调函数之后的,其他的没必要写
    succes:function(data){
    if(data.result==1){
    ~~~~~~~~~;
    ~~~~~~~~~;
    layer.clocse(index);
    isSwitch = false;//用完之后记得重置,下一次再用;
    }
    }
    })
    }
    })
    这样请求就不会重复提交,而且验证也可以用了
    0 回复
  • jrxiang
    7天前
    再提个忠告,弹框里套表单,直接就不要用yes函数那里面那个,因为它是a标签做的,不能设置disabled属性,解决起来很麻烦,直接就用button标签做提交按钮,这样的话后期比较好控制,而且用这个button也可以做成弹框右下方的那个保存按钮的样子,只需要在css调试工具找到样式,复制粘贴就行,我已经可以做的一模一样了,解决办法很多,只不过我如果换方法太多地方要改了,就才用这个方法.
    0 回复