直接操作 DOM 的 lay-verify 属性无效，因 Layui 初始化时已缓存该值；须配合 form.verify() 动态注册规则 + form.render('input', filter) 局部重载才能生效。
直接操作 DOM 的 lay-verify 属性无效？
因为 Layui 表单验证逻辑在初始化时就已解析并缓存了 lay-verify 值，后续手动改 DOM 的 lay-verify 属性（比如 elem.setAttribute('lay-verify', 'required|phone')）不会自动触发校验规则更新。表单提交或主动调用 form.verify() 时，仍按初始值执行。
正确做法：用 form.verify() 动态注册规则 + 手动触发重载
核心思路是绕过 DOM 属性依赖，把验证逻辑交给 Layui 的验证系统管理。需两步配合：
- 调用
form.verify()注册一个带唯一 key 的新规则（如'dynamic_phone'），规则函数里可读取当前 input 的实际状态（如是否启用、值是否为空） - 修改 input 元素的
lay-verify属性为该 key，并调用form.render('input')让 Layui 重新扫描该元素（注意：不是form.render()全局重载，开销小）
示例：让手机号输入框根据开关状态动态启用/禁用验证
// 假设开关是 checkbox，id="enablePhone"
// input 是 <input type="text" name="phone" id="phoneInput">
document.getElementById('enablePhone').addEventListener('change', function() {
const phoneInput = document.getElementById('phoneInput');
const verifyKey = 'dynamic_phone';
// 1. 注册/覆盖验证规则
form.verify({
[verifyKey]: function(value, item) {
// item 是当前 DOM 元素，可读取关联状态
if (!document.getElementById('enablePhone').checked) return; // 不启用则跳过
if (!value) return '请输入手机号';
if (!/^1[3-9]\d{9}$/.test(value)) return '手机号格式不正确';
}
});
// 2. 更新 lay-verify 属性并局部重载
phoneInput.setAttribute('lay-verify', this.checked ? verifyKey : '');
form.render('input', 'your-form-filter'); // 第二个参数是 form 容器的 filter 值，如 'demo'
});
为什么不能只改属性不调 form.render('input')？
Layui 的 form.render() 在指定类型（如 'input'）时，会重新遍历容器内所有匹配元素，提取 lay-verify 值并绑定事件。不调用它，Layui 就不知道这个 input 的验证配置变了。
- 漏掉
form.render('input', ...)→ 表单提交时仍用旧规则，或完全不校验 - 误用
form.render()（无参数）→ 全局重载所有表单组件，性能差且可能干扰其他区域 - 忘记传 form 容器的
filter→form.render('input')默认只处理未指定 filter 的 form，若你的 form 有lay-filter="myForm"，必须写成form.render('input', 'myForm')
更灵活的场景：多个 input 共享同一套动态规则
比如「证件类型」下拉框切换时，下方「证件号」input 的验证规则要变（身份证 / 护照 / 其他）。这时不要为每个 input 单独注册规则，而是统一用一个 key，规则函数内通过 item.name 或 item.id 区分逻辑：
form.verify({
'id_number': function(value, item) {
const type = document.querySelector('[name="idType"]').value;
if (!value) return '请输入证件号';
if (type === 'idcard') {
if (!/^\d{17}[\dXx]$/.test(value)) return '身份证格式不正确';
} else if (type === 'passport') {
if (!/^[a-zA-Z]{2}\d{6,10}$/.test(value)) return '护照号格式不正确';
}
}
});
// 切换下拉框时：
selectElem.addEventListener('change', function() {
const input = document.querySelector('[name="idNumber"]');
input.setAttribute('lay-verify', 'id_number');
form.render('input', 'myForm');
});
真正容易被忽略的是：规则函数里的 item 参数是原生 DOM 元素，不是 jQuery 对象，别试图用 $(item).data()；所有动态逻辑必须收口到这个函数内部，外部改属性只是“触发开关”。
