layui form.on 使用方法与常见问题排查
本文详解 layui 框架中 form.on 方法的使用规范，重点说明表单容器需配置 layui-form 类及 lay-submit、lay-filter 属性。针对 form.on 绑定 select 事件不执行的问题，提供三点排查方案：确保 HTML 结构正确、代码置于 layui.use 中、且 select 标签包含 lay-filter 属性。
介绍 layui 框架中 form.on 方法的具体应用方式。
首先，包含表单元素的 HTML 容器必须添加 class="layui-form" 属性，这是 layui 识别表单的基础。
<form class="layui-form" action="" id="f1">
<button id="query" type="button" class="layui-btn" lay-submit lay-filter="queryBtn">查询</button>
</form>其次，触发提交或监听的组件（如按钮）需具备 lay-submit 和 lay-filter 属性，具体配置可参考相关图示中的 button 元素。
此外，form.on 的调用逻辑必须封装在 layui.use(['table', 'form', 'layer'], function() {}) 回调函数内部，以确保模块加载完成。
具体应用示例如下：
layui.use(['table','form','layer'], function(){
form.on('submit(queryBtn)', function (data) {
//执行重载
table.reload('t1', {
url: '',
type: 'post',
page: {
curr: 1, //重新从第 1 页开始
}
, where: {
"applyTime1":$("#applyTime1").val(),
"applyTime2":$("#applyTime2").val(),
"status":$("#status").val()
}
})
});
}调用 form.on 时，参数格式为 'submit(组件的 lay-filter 值)'，例如 'submit(queryBtn)'。
在 layui 框架中，若使用 form.on('select(XXX)', function(){}) 绑定下拉框选中事件却未生效，可参考以下解决方法。
当 form.on 方法无法执行时，建议从以下几个方面进行排查：
第一，检查 HTML 中的 form 标签是否包含 class="layui-form"，缺失该属性会导致监听失效。
<form class="layui-form">
</form>第二，确认 form.on 方法是否被正确放置在 layui.use({}) 初始化代码块中。
<script language="JavaScript">
layui.use(['form', 'layer'], function () {
form.on('select(XXX)', function (data) {});
});第三，确保 select 标签中设置了 lay-filter 属性，该属性用于指定监听的具体下拉框实例。
<select id="XXX" lay-filter="XXX" lay-verify="required" lay-search>
<option></option>
</select>按照上述步骤修正后，form.on 方法即可正常执行。
至此，关于 layui form.on 的使用介绍完毕，更多相关内容可查阅本站过往文章或继续浏览后续教程，感谢支持。
JS脚本在App中运行报错怎么解决
2026-11-04 23:11:03
JS怎么使用padStart方法给数字补零
2026-11-04 11:12:03
JS是什么意思？JavaScript全称及基本定义
2026-11-04 08:05:29
JS 使用 toFixed(1) 保留一位小数的基本用法与注意事项
2026-11-03 18:34:57
JS字符串转整数：parseInt与Number的区别及用法
2026-11-03 17:26:54