必须在form.on('submit')中先调form.validate()确保.layui-form-danger类已同步添加,再查首个该类元素并focus(),同时配合scrollIntoView()和scroll-margin-top避免遮挡。

验证失败后怎么让第一个错误 input 获取焦点
必须在 form.on('submit') 回调里手动处理,Layui 不会自动 focus 错误项。直接查 .layui-form-danger 类不可靠——这个 class 是异步添加的,submit 回调执行时大概率还没加上。
正确做法是:在回调中主动触发一次校验(用 form.validate()),它会在 DOM 上同步标记错误项,之后再找第一个带 .layui-form-danger 的元素并 focus:
- 确保已引入
form模块且表单有lay-filter属性 - 调用
form.validate(function(valid){ if(!valid){ ... } }),不要只依赖 submit 事件的默认行为 - 用
$('form .layui-form-danger').first().focus(),不是$('input[lay-verify]').filter(...) - 如果表单在 tab 或折叠面板里,先限定范围:
$('.layui-tab-content .layui-show').find('.layui-form-danger').first().focus()
为什么加了 layui-form-danger 还没高亮边框
高亮边框(红色描边)依赖两个条件同时满足:class 存在 + 对应 input 有 name 属性。缺任何一个,CSS 规则 .layui-form-danger input 就不生效。
- 检查 input 是否漏写
name—— Layui 所有验证逻辑都靠 name 定位字段 - 确认自定义规则函数返回的是非空字符串,例如
return '不能为空';返回undefined或true不会触发高亮 - 动态插入的 input 必须调用
form.render('input'),否则事件和样式绑定未初始化 - 别用原生
blur事件手动加 class,Layui 的红边框是 CSS 驱动的,只响应.layui-form-danger在正确上下文中的存在
如何避免 focus 后被顶部导航栏遮挡
直接 .focus() 只激活输入框,不滚动页面。要确保用户看到它,得配合 scrollIntoView(),但默认行为常被固定定位的导航栏挡住。
- 优先用 CSS 解决:给 input 父容器(如
.layui-form-item)加scroll-margin-top: 60px(数值按导航栏高度调整) - JS 中调用
elem.scrollIntoView({ behavior: 'smooth', block: 'center' }),不要用$('html, body').animate(),后者在新版 Chrome 已不稳定 - 如果 input 在折叠面板或 tab 里,先调
element.tabChange('filter', 'panel-id')或accordion.expand(index)激活对应区域 - focus 和 scrollIntoView 要放在同一帧执行,避免因渲染时机错乱导致滚动失效
多个 tab 表单共用一个 submit 监听时怎么精准定位
全局查找 .layui-form-danger 会跨 tab 匹配,导致焦点跳到非当前页的输入框上,体验断裂。
- 不要用
$('form .layui-form-danger'),改用当前激活面板范围:const $active = $('.layui-tab-content .layui-show'); - 再查
$active.find('.layui-form-danger').first().focus() - 确保每个 tab 面板有唯一标识,比如
id="tab-basic"、id="tab-advance",方便后续扩展 - 如果 tab 是动态渲染的,注意
.layui-show类可能延迟添加,可监听element.on('tab(test)', function(data){})做预处理
form.validate(),也不代表 input 一定获得了焦点。这两步必须显式串联,不能假设它们自动同步。


















