layui如何清空表单内所有input的值

form.val()是唯一可靠方式，别用form.reset()；必须配合form.render()刷新UI，对select/date/checkbox等组件需分别调用对应render方法并确保事件触发。

form.val() 是唯一可靠方式，别用 form.reset()

layui 的 form.reset() 只触发原生重置，对 select、checkbox、date 等封装组件完全无效。点完按钮发现下拉框还挂着旧值、日期没变、开关仍开着——这就是典型表现。

必须用 form.val() 批量写空：

1. 确保表单有 lay-filter="searchForm"，然后调 form.val('searchForm', {})
2. 若没设 filter，可用 form.val(null, {})（Layui 2.8+ 支持）清空当前页所有已渲染表单
3. 只传空对象但没指定 filter 或传错名称，会导致“看似执行了，实际什么都没清”

清空后 form.val() 还返回旧值？检查事件是否触发

UI 清了但 form.val() 拿不到新值，90% 是因为没触发同步事件。Layui 表单值缓存完全依赖 input 或 change 事件，手动改 DOM 值却不发事件，模块就认为“值没变”。

常见错误写法：$('#name').val('') 或 inputEl.value = '' —— 这些都不够。

正确做法：

1. 用 form.val('filter', { name: '' })，它内部自动触发所需事件
2. 若需手动操作 DOM，务必补上 inputEl.dispatchEvent(new Event('input')) 或 $(inputEl).trigger('change')
3. 动态生成的 input（如表格 toolbar 内），建议用事件委托：$(document).on('click', '.layui-icon-clear', handler)

select / date / checkbox 这些“假 input”怎么清

Layui 的 select、date、checkbox 不是真实 input 元素，它们的值存在内部模型里，直接设 value="" 或 val('') 无法同步 UI。

必须按控件类型分别处理：

1. select：先 form.val('filter', { field: '' })，再 form.render('select')
2. date：先清空输入框 $('#date').val('')，再调 laydateIns.setValue('')（需提前保存实例）或重 render
3. checkbox：用 form.val('filter', { field: [] })，再 form.render('checkbox')
4. 所有字段统一清空可一步到位：form.val('filter', {})，但注意它只影响已注册字段名

清空后验证红边和提交按钮状态还在？得手动重置

form.val() 和 form.render() 都不会自动清除校验痕迹。输入框可能还是红色边框、错误提示没消失、提交按钮仍 disabled —— 这些不是 bug，是设计如此。

需要额外处理：

1. 移除验证失败样式：$('input').removeClass('layui-form-danger')
2. 清空错误提示区域：$('.layui-form-error').remove()
3. 重置按钮状态：$('#submitBtn').prop('disabled', false)
4. 如果用了 lay-verify，下次提交时会重新校验；想立刻重验，调 form.validate('filter')

最易被忽略的是：重置按钮本身必须写成 <button type="button">。放在 <form> 里却没设 type，点一下就触发表单提交，整个页面刷新或跳转。