Layui如何清除表单内所有输入内容

layui form.reset() 未清空内容是因为它仅触发原生重置，不处理Layui封装组件；应使用form.val('filter', {})清空并配合form.render()、手动重置验证状态及动态字段。

layui form.reset() 为什么没清空内容

因为 form.reset() 只触发原生表单重置行为，不处理 layui 封装的组件（如 select、checkbox、radio、date 等），也不更新 layui 的内部状态。你点完按钮发现下拉框还是原来选中的值，日期框没变，开关还开着——就是这个原因。

实操建议：

• 先调用原生 form.reset() 清理 input[type="text"]、textarea 这类基础控件
• 再手动重置 Layui 组件：用 form.val() 把整个表单设为空对象，它会同步更新 UI 和内部值
• 如果用了 laydate、layedit 等独立模块，得单独调它们的 destroy() 或 val('')

用 form.val() 一次性清空所有 Layui 表单字段

form.val() 是 Layui 表单模块最可靠的清空方式，它不依赖 DOM 结构，而是通过表单 id 或 class 找到绑定的数据模型，再批量写入空值。

常见错误现象：只传空对象但没指定表单容器，导致什么都没清掉；或者传了错误的 filter 值，匹配不到表单。

实操建议：

• 确保表单有 lay-filter="xxx"，然后调用 form.val('xxx', {})
• 如果没有 lay-filter，可用 form.val(null, {}) 清空当前页面所有已渲染的 Layui 表单（Layui 2.8+ 支持）
• 注意：该方法不会触发表单验证状态重置，如有红边提示需额外调用 form.verify() 或手动移除 layui-form-danger 类

多类型控件（switch / checkbox / select）清空时的坑

Layui 对不同控件的“空值”定义不一致：比如 switch 的关闭态对应 false，而 select 默认选项是 ''，checkbox 未勾选时根本不出现在 form.val() 返回对象里。

所以直接 form.val('demo', {}) 能清空，但如果你在清空后立刻取值，会发现 checkbox 仍返回旧数组——因为 DOM 没刷新，且 Layui 不会主动把未勾选项设为 []。

实操建议：

• 清空后加一句 form.render('checkbox')，强制重绘复选框组
• 对 switch，确保它的 value 属性有明确的开/关值（如 value="1" 和 value="0"），否则 form.val() 设 false 可能无效
• 自定义 select 的 placeholder 项必须带 value=""，否则清空后下拉框显示空白但实际值不是空字符串

清空后还要重置验证状态和提交按钮状态

很多人忘了：清空表单 ≠ 清空校验痕迹。输入框边框可能还是红色，错误提示还在，提交按钮可能仍处于 disabled 状态——这些都不是 form.val() 或 reset() 自动处理的。

性能影响不大，但用户体验断裂明显，尤其在弹窗表单反复打开/清空场景下。

实操建议：

• 手动移除校验失败样式：$('.layui-form input').removeClass('layui-form-danger')
• 隐藏所有校验提示元素：$('.layui-form .layui-form-danger + .layui-form-mid').remove()
• 恢复提交按钮：$('#submitBtn').prop('disabled', false).text('提交')
• 如果用了 form.on('submit()') 绑定，无需解绑，但要注意事件回调里别依赖残留的 DOM 状态

最易被忽略的是：动态添加的表单项（比如点击“新增一行”插入的 input）不会被 form.val() 自动识别，除非你调用过 form.render() 重新绑定。这类字段得单独 remove() 或 val('') 处理。