在Layui弹窗中点击“确定”按钮触发表单验证,需将其改造为带lay-submit和lay-filter的表单提交按钮,调用form.render()激活校验,并确保表单元素含lay-verify和name属性;通过form.on监听submit事件获取data.field,手动聚焦首个错误字段并提示,验证通过后发起Ajax或submit。

在Layui弹窗中点击“确定”按钮时触发表单验证,关键在于让该按钮具备表单提交语义,而非仅作为layer自带的普通按钮;否则lay-verify规则不会自动生效,用户可绕过校验直接关闭或提交。
将layer弹窗的“确定”按钮改造为表单提交按钮
第一步:在layer.open的success回调中,给弹窗DOM添加layui-form类,并定位到“确定”按钮(.layui-layer-btn0),为其注入lay-submit和lay-filter属性。
第二步:调用form.render()使Layui识别新增的表单结构和按钮类型。这一步漏掉会导致lay-verify完全不触发。
第三步:确保弹窗内表单元素已正确添加lay-verify属性(如required、phone、email等),且input、select、textarea均带有name属性——【name缺失会导致form.on监听失败】。
绑定submit事件并执行验证逻辑
方法一:使用form.on监听自定义filter
在layui.use中引入form模块后,写form.on('submit(formDemoDDD)', function(data){ ... }),其中formDemoDDD必须与按钮的lay-filter值完全一致。data.field会自动收集所有带name的已验证通过字段值。
方法二:手动触发验证(适用于需前置干预场景)
在yes回调里先调用form.verify()对指定规则做预检,返回true才继续;若失败,用layer.msg提示并return false阻断后续流程。注意:此方式需自行维护验证规则函数,不推荐新手直接使用。
处理验证失败后的焦点与提示
当某字段未通过lay-verify时,Layui默认会在控制台报错但不主动聚焦错误项。你必须在form.on回调中手动定位首个验证失败的input:$('input[lay-verify]').filter(function(){ return !$(this).val(); }).first().focus();
同时配合layer.msg显示具体错误信息,比如“请输入用户名”或“邮箱格式不正确”。【不要依赖默认提示,它只在console输出】
验证通过后,可安全获取data.field对象发起Ajax提交,或调用原生data.form.submit()触发表单真实提交(注意避免递归调用)。


















