layui.form.verify()中不能直接操作DOM样式，因验证异步且elem为原生DOM；应通过覆盖.layui-form-danger的CSS规则（如border-color: #ff5722!important）实现红边效果，并在submit时聚焦首个错误项，实时验证需手动清理该class。
layui.form.verify() 里不能直接操作 DOM 样式
很多人以为在自定义验证函数里写 $(elem).css('border', '1px solid red') 就能生效，其实不行——因为 layui 的表单验证是异步触发的，且验证失败后会重置部分样式；更关键的是，form.verify() 回调里传入的 elem 是原始 dom 元素（不是 jquery 对象），而且此时表单尚未渲染错误态。
真正起作用的时机，是在验证失败、layui 自动添加 layui-form-danger 类之后。这个类默认只影响文字颜色和图标，不改边框。
所以核心思路不是“手动加红边”，而是覆盖或扩展 layui 的错误样式规则。
覆盖 .layui-form-danger 的 CSS 规则
layui 默认给验证失败的 <input>、<select></select>、<textarea></textarea> 添加 layui-form-danger 类，但它的默认样式没设边框。你需要在自己的 CSS 中补全：
.layui-form-danger {
border-color: #ff5722 !important;
box-shadow: 0 0 3px #ff5722 !important;
}
注意几点：
- 必须用
!important，否则被 layui 内联样式或后续 reset 覆盖 - 推荐用
border-color而非border，避免干扰原有边框宽度/样式 - 如果用了
layui-input等封装类，确保你的 CSS 选择器权重足够（比如加.layui-form .layui-form-danger）
验证失败后手动触发 focus 或 scrollIntoView
仅变红不够，用户可能没注意到错误项。建议在 form.on('submit(...)') 中拦截并聚焦第一个失败项：
form.on('submit(myForm)', function(data){
// 假设你已做了前端校验逻辑
var $firstError = $('.layui-form-danger').first();
if ($firstError.length) {
$firstError.focus();
$firstError[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
return false; // 阻止提交
}
});
这个技巧能显著提升表单体验，尤其在长表单中。
动态验证（如 blur 时）需额外监听并清理状态
如果你启用了实时验证（比如在 blur 时调用 form.validate()），要注意：layui 不会自动移除 layui-form-danger 类，即使用户已输入合法内容。必须手动清理：
- 监听
input或blur事件 - 对当前字段重新校验（可用
form.verify()配合自定义规则） - 校验通过后，执行
$(this).removeClass('layui-form-danger') - 别忘了同步清除关联的提示文字（
.layui-form-hint）
否则会出现“输对了还红着”的情况，这是最常被忽略的细节。
