需手动在input父容器内插入并控制layui-form-error元素：监听blur事件，校验后动态创建/更新该div，用CSS定位显示专属红色提示。

layui 表单如何让某个 input 显示独立的 error 提示层

默认情况下，layui 的 form.verify 只触发全局提示（layer.msg），不绑定到具体表单项。要实现「某个输入框下方显示专属红色提示文字」，必须绕过默认验证流程，手动控制提示层的创建与销毁。

核心思路是：禁用该字段的内置验证，用 form.on('submit') 或 input 事件监听 + 手动校验 + 动态插入/更新

元素。

• layui 不提供开箱即用的「单字段 error 层」API，form.verify 是全局钩子，无法返回字段级 DOM 节点
• 不能依赖 form.render('verify') 触发单字段重验——它只影响渲染，不触发校验逻辑
• 推荐在 blur 或 change 时校验，避免过度干扰用户输入

怎么用原生 DOM 插入一个跟随 input 的提示层

最轻量的做法是，在目标 input 的父容器（通常是 .layui-form-item）内动态追加一个

，并用 CSS 控制样式和定位。

示例：给 ID 为 username 的输入框添加提示层

document.getElementById('username').addEventListener('blur', function() {
  const val = this.value.trim();
  const parent = this.closest('.layui-form-item');
  let errorEl = parent.querySelector('.layui-form-error');
  
  if (val.length 

• 必须用 this.closest('.layui-form-item') 定位父容器，不能硬写 parentElement——layui 结构可能嵌套
• 提示层 class 设为 layui-form-error 是为了兼容 layui 默认样式（如颜色、字体大小），但需自行补全 margin-top 避免紧贴输入框
• 每次 blur 都要检查元素是否存在，避免重复插入

如何配合 layui 的 form.on('submit') 做最终校验并聚焦首个错误项

单独做实时校验不够，提交时仍需统一拦截并高亮所有未通过字段。此时不能只靠 return false，得主动调用上面的校验逻辑，并 focus() 到第一个出错的 input。


深蓝色网站后台管理系统layui框架模板-AdminPro
一款深蓝色网站后台管理系统layui框架模板
下载

form.on('submit(formDemo)', function(data) {
  let hasError = false;
  const fields = ['username', 'email', 'password'];
  
  fields.forEach(id => {
    const el = document.getElementById(id);
    const val = el.value.trim();
    
    if (id === 'username' && val.length 

• showError 必须抽成函数复用，否则 submit 和 blur 逻辑会重复
• 聚焦首个错误项后，不要 return false 就完事——要确保所有字段都跑一遍校验，不然后续提交可能漏提示
• 注意正则校验邮箱时，layui 自带的 email 验证规则较宽松（只判 @），建议用更严格的正则

为什么不用 layer.tips 替代 .layui-form-error

用 layer.tips 看似简单，但实际容易出问题：

• layer.tips 是绝对定位浮层，当页面滚动或表单区域重绘（比如切换 tab、折叠面板）时，tip 很可能错位甚至消失
• 多个 tip 同时存在时，z-index 管理麻烦，且无法自然跟随 input 的 DOM 流式布局
• 移动端 touch 事件下，tip 的 follow 参数响应滞后，用户可能点不到输入框就触发了 tip
• layui 官方 demo 和文档中所有表单错误提示都是基于 DOM 插入，而非 layer 浮层——这是有意为之的稳定性选择

真正需要 tip 效果的场景（比如 hover 查看规则说明），才用 layer.tips；错误提示，老老实实插 DOM。