layui 的 select 下拉框需用 form.on('select(name)') 监听变更，form.validate() 默认不校验它；校验 select 需确保 lay-verify 写在原生 select 上，并调用 form.validate(data.elem) 或触发 $(data.elem).blur()。
直接调用 form.validate() 不会校验 select 下拉框——它只对当前焦点元素或显式传入的 DOM 节点生效，而 layui 渲染后的 select 是隐藏原生元素、用 div 模拟的，form.validate() 默认根本找不到它。
为什么 change 事件监听不到下拉框值变更
layui 的 select 渲染后，原生 change 事件被剥离，直接绑定在 <select> 上完全无效。必须使用 layui 提供的表单事件监听机制。
- 错误写法：
$('#area').on('change', ...)或document.querySelector('select[name="area"]').addEventListener('change', ...)—— 这些永远不触发 - 正确写法：
form.on('select(area)', function(data){ ... })，其中area是select的name属性值 - 注意：这个回调里的
data.value是新选中的值，data.elem是原始<select>元素（非渲染后的 div）
如何在 select 值变更后只校验它自己
在 form.on('select(xxx)') 回调里调用 form.validate() 会校验整个表单，且无法定位到具体字段。更轻量、更可控的方式是手动取值 + 手动比对规则。
- 从
data.elem拿到原始select，再用$(data.elem).val()或data.elem.value获取当前值 - 检查是否为空：
if (!value) { form.msg(data.elem, '请选择地区'); return; } - 若需复用
form.verify中定义的规则（比如白名单校验），把规则逻辑抽成独立函数，例如：function checkArea(value) { return ['bj', 'sh', 'gz'].includes(value) ? true : '仅支持北京、上海、广州'; } - 校验失败时调用
form.msg(elem, msg)显示提示；成功则调用form.msg(elem, null)清除提示
form.validate() 怎么才能校验 select 字段
只有两种可靠方式能让 form.validate() 主动校验 select：一是让它聚焦后失焦（模拟用户操作），二是手动传入 select 对应的原始 DOM 节点。
- 方法一（推荐）：在 select 变更后，手动触发一次
blur：$(data.elem).blur()，这会触发 layui 内部的实时校验流程 - 方法二（精确控制）：调用
form.validate(data.elem)，注意传的是原生<select>元素，不是渲染后的 div，也不是 jQuery 对象 - 常见报错：
form is not defined→ 检查是否漏了layui.use('form', function(form){ ... })，form不是全局变量 - 不要传渲染后的 div：
form.validate($('.layui-select-title'))一定失败
最易忽略的一点：select 校验依赖 lay-verify 属性是否写在原始 <select> 上，而不是外层 <div class="layui-form-item">。如果属性写错位置，哪怕事件监听对了，form.validate() 也识别不出校验规则。
