Layui表单验证失败时如何修改默认弹出的Tips气泡颜色

张开发
2026/4/20 3:59:38 15 分钟阅读
Layui表单验证失败时如何修改默认弹出的Tips气泡颜色
Layui form.verify 失败时的 tips 气泡颜色由 layer.tips 的 tips 参数控制需在自定义验证规则中 return false 并手动调用 layer.tips({tips: [方向, #颜色]})禁用默认红色提示。layui form.verify 失败时的 tips 气泡颜色由哪控制默认是红色但不是靠 css 类名直接覆盖就能改的——layui 在校验失败时动态创建 tips 元素并内联写死 color 和 background-color。你用全局 css 覆盖 .layui-layer-tips 通常无效因为内联样式优先级更高。修改 tips 颜色的唯一可靠方式重写 layui.form.render 的验证回调Layui 表单验证失败后调用的是 layui.layer.tips而这个调用藏在 form.verify 的内部逻辑里。不能直接 patch但可以在 form.on(submit(...)) 或自定义 verify 规则中手动接管提示逻辑禁用默认验证提示在 form.verify 规则函数里 不返回错误字符串即不触发内置 tips自己调用 layer.tips传入 style 参数控制颜色例如layer.tips(不能为空, elem, {tips: [1, #FF5722], time: 2000})tips: [1, #FF5722] 中的 1 表示方向上#FF5722 是背景色文字色会自动反色无需单独设注意 form.verify 规则里 return false 和 return 字符串的区别这是最容易踩的坑return false 不会触发任何 tipsreturn 字符串才会触发默认红色 tips。所以想换颜色必须避开后者 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手依托大模型帮助用户记录、整理和分析音视频内容体验用大模型做音视频笔记、整理会议记录。

更多文章