### Layui Form 模块的使用方法及 `lay-filter` 属性的功能解析 #### 一、Form 模块基础概念 Layui 的 Form 模块提供了强大的表单操作功能，包括但不限于动态渲染、数据校验、事件监听等。为了使这些功能生效，需遵循一定的规则设置 HTML 元素属性[^1]。 - **HTML 基础配置** - 表单容器必须添加 `class="layui-form"` 类名，这是启用 Layui 表单功能的前提条件。 - 提交按钮应具备 `lay-submit` 属性以激活默认提交行为，并可通过附加 `lay-filter` 属性为其分配唯一的标识符。 #### 二、`lay-filter` 属性详解 `lay-filter` 是一个字符串类型的属性，主要用途在于区分不同的 DOM 元素或事件源。其核心价值体现在以下几个方面： - **事件绑定的关键依据** 当多个相同类型的控件（如单选框、下拉菜单）共存于同一页面时，`lay-filter` 可作为筛选器帮助开发者精准定位目标元素。例如，在监听一组单选按钮的变化时，可以通过设定相同的 `lay-filter` 值实现统一处理逻辑[^3]。 - **示例代码展示** ```html <!-- 单选按钮 --> <div class="layui-form-item"> <input type="radio" name="interest" title="写作" lay-filter="demo1" value="write"> <input type="radio" name="interest" title="阅读" lay-filter="demo1" value="read"> </div> <script> layui.use('form', function(){ var form = layui.form; // 监听指定 lay-filter='demo1' 的变化事件 form.on('radio(demo1)', function(data){ console.log(data.elem); // 获取被点击的原始DOM对象 console.log(data.value); // 获得被点击的值 console.log(this.value); // 同 data.value }); }); </script> ``` 在此案例中，无论用户选择了 “写作” 还是 “阅读”，都会触发同一个回调函数执行相应的业务逻辑。 #### 三、综合应用场景——结合时间插件完成复杂表单构建 假设我们需要制作一份包含日期选择器在内的求职申请表，则可以按照如下方式组织代码结构： ```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="realname" required lay-verify="required" placeholder="请输入您的全名..." autocomplete="off" class="layui-input"> </div> </div> <!-- 出生年月 --> <div class="layui-form-item"> <label class="layui-form-label">出生年月：</label> <div class="layui-input-inline"> <input type="text" class="layui-input" id="test-laydate" placeholder="请选择..."> </div> </div> <!-- 性别 --> <div class="layui-form-item"> <label>性别：</label> <input type="radio" name="sex" value="male" title="男" checked lay-filter="gender"> <input type="radio" name="sex" value="female" title="女" lay-filter="gender"> </div> <!-- 提交按钮 --> <div class="layui-form-item"> <button class="layui-btn" lay-submit lay-filter="applyJob">确认提交</button> </div> </form> <script src="//res.layui.com/layui/v2.6.8/layui.js"></script> <script> layui.config({ base: '//res.layui.com/' // 修改此处为实际路径即可 }).extend({ laydate: 'lay/modules/laydate' }); layui.use(['form', 'laydate'], function(){ var form = layui.form, laydate = layui.laydate; // 初始化日期选择器 laydate.render({ elem: '#test-laydate', trigger: 'click' }); // 注册 radio change 事件处理器 form.on('radio(gender)', function(data){ alert(`您选择了 ${data.value === 'male'? '男性': '女性'}!`); }); // 处理最终表单提交动作 form.on('submit(applyJob)', function(obj){ layer.alert(JSON.stringify(obj.field), { title: '即将发送的数据' }, function(index){ layer.close(index); } ); return false; // 防止页面跳转 }); }); </script> ``` 上述脚本不仅涵盖了基本字段录入还融入了第三方组件联动机制，充分体现了 Layui Framework 在现代 Web 开发领域内的灵活性与高效性[^2]。 --- ###