### Layui 中 form.on 方法的使用说明与示例 `form.on` 是 Layui 表单模块中的一个重要方法，用于监听表单事件。它支持多种事件类型，例如 `submit`（表单提交）、`checkbox`（复选框勾选/取消勾选）等。以下是关于 `form.on` 方法的详细说明和示例[^3]。 #### 1. 监听表单提交事件 通过 `form.on('submit(filter)', callback)` 可以监听表单的提交事件。`filter` 是表单按钮上的 `lay-filter` 属性值，用于区分不同的提交事件。以下是一个完整的示例： ```html <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">标题</label> <div class="layui-input-block"> <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="addNews">立即提交</button> </div> </div> </form> <script> layui.use(['form'], function(){ var form = layui.form; // 监听表单提交 form.on('submit(addNews)', function(data){ console.log(data.field); // 获取表单字段数据 return false; // 阻止表单跳转。如果需要表单跳转，可以不加该代码 }); }); </script> ``` 在上述代码中，`data.field` 包含了表单的所有字段值，可以通过键名访问对应的值。例如 `data.field.title` 就是输入框中填写的标题内容[^3]。 #### 2. 监听复选框事件 通过 `form.on('checkbox(filter)', callback)` 可以监听复选框的勾选或取消勾选事件。以下是一个示例： ```html <div class="layui-form-item"> <input type="checkbox" name="like[write]" title="写作" lay-skin="primary"> <input type="checkbox" name="like[read]" title="阅读" lay-skin="primary"> </div> <script> layui.use(['form'], function(){ var form = layui.form; // 监听复选框事件 form.on('checkbox(like)', function(data){ console.log(data.elem.checked); // 是否被选中 console.log(data.value); // 复选框的值 }); }); </script> ``` 在上述代码中，`data.elem.checked` 表示复选框是否被选中，`data.value` 是复选框的值[^4]。 #### 3. 自定义验证规则 在使用 `form.on` 监听表单提交时，通常需要对表单字段进行验证。Layui 提供了自定义验证规则的功能，以下是一个示例： ```javascript layui.use(['form'], function(){ var form = layui.form; // 自定义验证规则 form.verify({ username: function(value, item){ // value：表单的值，item：表单的DOM对象 if(!new RegExp("^[a-zA-Z0-9_\-\u4e00-\u9fa5]+$").test(value)){ return '用户名不能有特殊字符'; } }, password: [/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'] }); // 监听表单提交 form.on('submit(demo1)', function(data){ console.log(data.field); // 获取表单字段数据 return false; }); }); ``` 在上述代码中，`form.verify` 定义了两个自定义验证规则：`username` 和 `password`。`username` 使用了函数体形式，而 `password` 使用了 `[正则表达式, 错误提示文本]` 的形式[^2]。 ### 注意事项 1. 在使用 `form.on` 方法时，需要确保表单元素已经加载完成，否则可能无法正常触发事件。 2. 如果需要阻止表单的默认提交行为，可以在回调函数中返回 `false`。 3. `form.on` 的事件类型和过滤器名称需要与表单元素的属性值一致。