应调用 form.validate() 回调中用 $('.layui-form-danger').first() 获取首个错误元素，注意作用域限定、折叠面板展开及 scrollintoview 配置，因 layui 不提供错误规则映射，需自行维护字段与验证规则关联。
layui 表单验证失败后怎么拿到第一个错误元素
必须先触发验证，否则 DOM 上不会添加 layui-form-danger 类——这是 layui 标记验证失败的唯一可靠依据。不要依赖 form.verify 的返回值，它不暴露字段名；也不要指望 form.on('submit') 回调里的 field 参数，它只含通过验证的字段。
正确做法是主动调用 form.validate() 并在回调里操作：
- 回调参数
valid为false时，$('form .layui-form-danger').first()才有意义 - 若表单嵌套在
lay-accordion或lay-tab里，得先激活对应面板，否则目标元素可能不可见、scrollIntoView失效 - 多个表单共存时，记得限定作用域：
$('#myForm .layui-form-danger').first()，避免误选其他表单的错误项
滚动到错误元素时为什么没对准或被遮挡
scrollIntoView 默认行为受 CSS 影响极大，常见错位原因不是 JS 写错了，而是布局干扰：
- 顶部有
position: fixed导航栏？加scroll-margin-top: 60px到出错的input或其父.layui-form-item上（推荐），比手动计算偏移更稳定 - 错误元素在折叠面板里？先调
element.accordion('expand', index)或element.tabChange('tabFilter', 'panelId') - 用了
layer.open弹层且内容过长？确认弹层配置了scrollbar: false，否则内部滚动和页面滚动会冲突 - 别用
$('html, body').animate({ scrollTop: ... })—— Chrome 新版本对body滚动支持已不稳定，且绕过了原生平滑行为
如何写出稳定可用的滚动代码
以下是最小可行示例，已避开常见陷阱：
form.on('submit(formDemo)', function(data) {
form.validate(function(valid) {
if (!valid) {
// 确保 DOM 更新完成
nextTick(() => {
const $firstErr = $('.layui-form-danger').first();
if ($firstErr.length) {
// 先展开父级折叠/Tab（如有）
const $parentPanel = $firstErr.closest('.layui-colla-item, .layui-tab-item');
if ($parentPanel.length && $parentPanel.css('display') === 'none') {
element.accordion('expand', $parentPanel.index());
}
$firstErr[0].scrollIntoView({
behavior: 'smooth',
block: 'center',
inline: 'nearest'
});
}
});
return false;
}
});
return false;
});
-
nextTick是 layui 的layui.use('layer', callback)之外的兜底方案；若用 Vue 封装 layui，应换为this.$nextTick -
inline: 'nearest'防止水平方向因 flex 布局错位 - 没用
$firstErr.parent()或$firstErr.closest('.layui-form-item')—— 因为部分自定义组件（如日期选择器）错误类加在 wrapper 上，直接滚到它更准确
为什么看不到错误原因，只能定位却不知道哪里错了
layui 不提供错误字段与验证规则的映射关系。你拿到的是带 layui-form-danger 的 DOM 元素，但无法反查是哪个 lay-verify 规则触发的、提示文案从哪来。这是因为：
-
form.verify是纯函数，返回字符串即覆盖默认提示，不绑定上下文 - 错误提示文案硬编码在规则定义里，没挂载到元素实例上（截至 2026 年 4 月 5 日）
- 如果需要展示具体错误原因（比如“密码长度不足6位”而非笼统的“请输入密码”），只能自己维护一个
name → rule映射表，或改用layer.msg在滚动前手动弹出提示
真正难的从来不是滚动，而是把「哪个字段、因哪条规则、错在哪里」这三个信息串起来——layui 没帮你做这件事。
