确定按钮需初始化禁用并实时联动表单状态:弹窗打开时按钮必须同时含disabled属性和layui-btn-disabled类;通过form.on监听字段变化动态启禁用;提交前须二次校验并立即禁用按钮防重复提交。

在Layui弹窗中,当表单未填写完整时,确定按钮必须处于禁用状态,防止用户误提交空数据或校验失败的数据——这要求按钮状态与表单字段实时联动,且禁用逻辑不能仅靠前端视觉遮蔽,必须同步控制DOM属性、CSS类和事件守卫。
初始化弹窗时禁用确定按钮
调用layer.open()前,在content内容中写死确定按钮的disabled属性和layui-btn-disabled类:【按钮HTML必须同时包含disabled和layui-btn-disabled,缺一不可】
例如在弹窗body内写:
这一步确保弹窗打开瞬间按钮不可点、视觉灰显,避免渲染间隙出现可点击窗口。
监听表单字段变化并动态启用按钮
使用layui.form模块监听所有必填字段的change或keyup事件,统一判断是否全部非空:
在layer.open的success回调中,执行以下代码:
form.on('checkbox(status), select(city), input[name="name"]', function(data){<br> const name = $('input[name="name"]').val().trim();<br> const city = $('select[name="city"]').val();<br> const status = $('input[name="status"]').is(':checked');<br> if (name && city && status) {<br> $('button[lay-submit]').removeClass('layui-btn-disabled').prop('disabled', false);<br> } else {<br> $('button[lay-submit]').addClass('layui-btn-disabled').prop('disabled', true);<br> }<br>});
注意:不要监听blur,因为用户可能尚未输完就切走,导致按钮提前启用;change对select/checkbox天然友好,input用keyup更及时。
提交前二次校验并锁定按钮
即使按钮已启用,用户仍可能手动删掉内容后直接点确定。因此必须在form.on('submit')中做最终拦截:
第一步:获取当前表单数据并逐项校验
第二步:若任一必填字段为空,阻止提交并提示,同时立即禁用按钮:【禁用操作必须在event.preventDefault()之后立刻执行,否则用户可能连点两次】
第三步:校验通过后,立即禁用按钮并修改文字为“提交中…”
示例代码片段:
form.on('submit(saveForm)', function(data){<br> if (!data.field.name || !data.field.city) {<br> layer.msg('请填写完整信息');<br> $(this).addClass('layui-btn-disabled').prop('disabled', true);<br> return false;<br> }<br> $(this).addClass('layui-btn-disabled').prop('disabled', true).text('提交中…');<br>});











