layui 2.x 中 form.on 报错因错误调用 layui.form() 或未在 layui.use 回调中使用；正确写法为 var form = layui.form，且 form.on 必须在 layui.use(['form'], callback) 内调用，并确保 html 有 layui-form 类和 lay-filter 属性。
form.on is not a function 说明你拿到了 form 对象，但它不是函数，而是 undefined 或普通对象——根本原因是没正确获取 Layui 的 form 模块实例，常见于升级到 Layui 2.x 后仍用旧写法，或模块未加载完成就调用。
form = layui.form() 这个括号必须去掉
这是 Layui 2.x 最典型的兼容性断裂点。1.x 版本中 layui.form() 是函数调用，2.x 改为直接导出模块对象，加括号会报 TypeError: layui.form is not a function（因为 layui.form 本身是对象，不是函数）。
- ❌ 错误写法：
var form = layui.form(); - ✅ 正确写法：
var form = layui.form; - 如果项目混用了 1.x 和 2.x 的文档或示例，务必统一按 2.x 规范：所有模块（
element、table、layer）都不带括号
form.on 必须在 layui.use('form', ...) 回调里调用
form.on 不是全局方法，它依赖模块加载完成后的内部初始化逻辑。即使 layui.form 已存在，若没走 layui.use 流程，form.on 也可能未挂载。
- ❌ 错误位置：写在
layui.use外部，或放在$(document).ready()里 - ✅ 正确位置：
layui.use(['form'], function(){ var form = layui.form; form.on('submit(add)', callback); }); - 如果同时用多个模块（比如
form和table），统一用数组方式加载：layui.use(['form', 'table'], function(){...})
HTML 结构缺失导致 form 模块无法绑定事件
form.on 能监听到事件，前提是 DOM 元素已被 form.render() 处理过，而渲染的前提是结构合规。
- 表单容器必须有
class="layui-form"，否则form.on根本不扫描内部元素 - 要监听的控件（如
<select lay-filter="city"></select>、<input type="radio" name="type" lay-filter="type">）必须带lay-filter属性，且值与form.on('event(filter)')中的filter严格一致 - 动态插入的 HTML（如 AJAX 加载后
.html()）必须先调form.render()，再绑定form.on；否则事件委托失效
容易被忽略的复合问题：报错掩盖了真实断点
这个错误经常不是孤立出现的。比如你修复了括号问题，但控制台紧接着报 Cannot read property 'on' of undefined——那说明 layui.form 仍是 undefined，根源其实是 layui.js 没加载成功，或 layui.use 被阻塞（如网络超时、路径 404、Shiro 拦截静态资源）。不要只盯着 form.on，先确认 console.log(layui) 能打出对象，再确认 console.log(layui.form) 不是 undefined。
