第一个错误字段的 name 可通过 $('form .layui-form-danger').first().attr('name') 获取,前提是已触发验证(如调用 form.validate() 或点击提交),此时 layui 已为失败项添加 .layui-form-danger 类。
layui form.verify 失败后怎么拿到第一个错误的 name?
layui 表单验证失败时,form.verify 本身不返回具体哪个字段出错,它只负责校验逻辑;真正触发错误提示、收集错误项的是 form.submit 的回调或内置校验流程。所以“获取第一个错误项”,得从提交拦截入手,而不是在 verify 函数里找。
关键点在于:layui 的错误提示是通过给对应 input(或 select、textarea)添加 layui-form-danger 类 + 插入提示元素实现的。所有已触发验证失败的元素都会被标记,但顺序取决于表单 DOM 顺序。
- 用
$('form .layui-form-danger').first()可取到第一个带错误样式的表单项(注意:必须确保验证已执行,即用户已点击提交或调用了form.validate()) - 更稳妥的做法是主动触发一次验证:
form.validate(function(valid){ if(!valid) { /* 此时 DOM 已更新 */ } }) - 别依赖
form.on('submit')回调里的field—— 它只含通过验证的值,错误字段根本不会出现在里面
如何让页面自动滚动到第一个错误位置?
拿到第一个错误元素后,滚动本身很简单,但要注意 layui 的弹层提示(如 layer.msg)可能遮挡、表单项在折叠面板/Tab 页里未展开、或元素被 position: fixed 容器裁剪等问题。
- 先确保目标元素可见:
$('.layui-form-danger').first()[0]?.scrollIntoView({ behavior: 'smooth', block: 'center' }) - 如果用了
lay-tab或lay-accordion,得先激活对应面板:element.tabChange('demo', 'error-panel-id')或accordion.expand(2) - 避免滚动后被顶部固定导航栏挡住:加偏移量,比如
scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'smooth' })配合 CSSscroll-margin-top: 60px(推荐) - 不要用
$('html, body').animate({ scrollTop: ... })—— 在 Chrome 新版本中对body滚动支持不稳定,且会绕过原生平滑行为
为什么 form.val() 拿不到错误字段的值?
form.val('filter') 只返回「有 name 属性且非 disabled」的表单项当前值,不管是否验证通过。它不参与验证逻辑,也不过滤错误项。所以你不能靠它反推哪项错了。
- 验证失败字段的值依然能被
form.val()读到,除非它被禁用(disabled)或没写name - 真正“丢失”的是验证失败原因 —— layui 不提供错误原因映射表,
form.verify的提示文案是硬编码在规则里的,没绑定到具体字段实例上 - 如果需要精确知道哪个字段因哪条规则失败,得自己封装:在每个
verify规则里记录lastError = { name: 'username', rule: 'required', msg: '用户名不能为空' },再在 submit 里读取
兼容性与容易忽略的细节
这套定位逻辑在 layui 2.8+ 是稳定的,但老版本(如 2.5.x)的 layui-form-danger 类名可能没及时添加,或 scrollIntoView 行为不一致。
- 移动端 Safari 对
scrollIntoView的block参数支持较弱,建议降级为{ behavior: 'auto' }或手动计算offsetTop - 动态渲染的表单(如用
lay-tpl或 JS 插入)需在插入后调用form.render(),否则layui-form-danger不会生效 - 如果用了自定义验证图标或清除了默认样式,
.layui-form-danger可能不存在 —— 此时应改用 data 属性标记:form.verify里手动加$('[name="'+name+'"]').attr('data-error', '1'),再查$('[data-error="1"]').first()
最麻烦的不是滚动,而是错误状态和 UI 状态不同步:比如用户删掉错误内容后没触发 blur,错误样式还挂着;或者异步验证(如用户名是否可用)完成前就点了提交。这类情况得靠 form.on('checkbox|radio|select|...') 和防抖补全交互闭环。










