layui表单提交后刷新页面问题

鄙人在测试页面表单提交的时候发现有时候点击提交按钮,第一次提交会验证必填项,但是再次点击页面会刷新,但是内容并没有提交后台,导致页面没有内容,白填写,最后经过鄙人一步步的测试发现是一个自己写的js中表单必填项验证出了问题,如下图所示:

 required: function (value, item) { 
            var verifyName = $(item).attr('name') 
                , formElem = $(item).parents('.layui-form')//获取当前所在的form元素,如果存在的话
                , verifyElem = formElem.find('input[name=' + verifyName + ']');//获取需要校验的元素
            if (!value) {
                //定位焦点
                verifyElem.css({"border-color": "#FF5722"});
                //对输入框设置焦点
                verifyElem.first().attr("tabIndex", "1").css("outline", "0").blur(function () {
                    verifyElem.css({"border-color": ""});
                }).focus();
                return '必填项不能为空';
            }
        },

如图中的 verifyName  这个参数导致在提交的时候我一个个的输出来看发现有一个获取为空,导致再次点击提交按钮的时候直接报错就刷新了页面,所以这个地方要验证一下,如果为空就不进行校验了,将verifyName 改成verifyName&&verifyName!=null就可以了,但是这样有时候还是不行,最后鄙人调查了一下是页面当中的提交按钮是这样的

<button class="layui-btn w-100" lay-submit lay-filter="save">提交</button>

这个button标签没有添加类型,开始以为标签是button就没事了,但是最后发现不加就会出现提交表单页面直接刷新,所以我改成这样

<button type="button" class="layui-btn w-100" lay-submit lay-filter="save">提交</button>

添加了一个 type="button" ,再次提交测试就没有问题了,当然我这之后添加了一些图片验证,如果没有填写就会提示请上传图片,重复点击只有第一次提示,之后就不再提示了,经过修改之后就不会出现这样的问题了!

 

 

关于这个type="button"这个是看到别人的,如果有侵权请及早告知!

  • 5
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值