在Layui项目开发过程中，表单的“重置”功能是常见需求，但许多开发者都遇到过同一个棘手问题：调用 layui.form.reset() 方法后，表单不仅没有恢复到初始状态，反而所有内容都被清空了。这背后的原理其实并不复杂，但找到正确的解决方案需要深入理解其工作机制。
layui.form.reset() 为何会清空表单，而非重置为初始值？
很多开发者感到困惑：点击“重置”按钮后，为什么预设的单选选项、复选框勾选状态，甚至下拉菜单的默认选择都消失了呢？根本原因在于该方法底层调用了HTML原生的 form.reset() 方法。原生方法有一个关键特性：它只识别并还原HTML标签中硬编码的初始属性值，例如 value、checked、selected 等。
然而，在实际的Layui应用场景中，表单的初始状态往往不是静态的。更多情况下，我们需要通过JavaScript动态赋值：例如页面加载完成后，通过 layui.form.val('demo', {...}) 从后端API获取数据并填充表单，或者对下拉选择框等组件执行 layui.form.render() 进行渲染。对于这些通过JS动态设置的值，原生的 reset() 方法完全无法识别，它只会将表单恢复到HTML源码中的原始空白状态，从而导致“清空”而非“重置”的效果。
因此，要实现真正的“恢复到初始数据”，核心思路在于：我们需要主动记录下表单的“初始状态”，并在需要时手动将其还原。
手动保存表单初始值的两种有效策略
解决问题的核心思路非常清晰：在表单首次完成渲染和数据填充的那一刻，立即将当前完整的数据状态进行备份存储。这里推荐两种经过实践检验的可靠方法：
- 基于赋值数据进行深度缓存：如果你使用
layui.form.val('filter', data)方法来初始化表单数据，最直接的方式就是在调用该方法后，立即对传入的data对象进行一次深拷贝并保存。例如：initialFormData = JSON.parse(JSON.stringify(data))。使用深拷贝至关重要，它可以防止后续操作意外修改原始数据对象，从而污染缓存。 - 基于DOM默认属性进行扫描构建：如果你的表单初始值是由服务端直接渲染在HTML中（例如某些字段已有预设值），前端仅使用JS进行组件样式渲染（如渲染Select组件），那么可以通过扫描所有表单控件，读取它们的DOM默认属性来构建初始数据对象。使用
document.querySelectorAll('input, select, textarea')进行遍历，并读取defaultValue、defaultChecked、defaultSelected等原生属性来组装数据。
这里有一个重要细节：尽量避免直接使用 form.elements 进行遍历。因为Layui渲染的一些特殊组件（例如开关switch、时间选择器）可能不在原生的表单元素集合内。最稳妥的依据，仍然是你最初调用 form.val() 时所使用的那个数据结构。
使用 form.val() 方法主动还原表单初始值
一旦拥有了初始数据的快照，还原操作就变得非常简单直接。只需再次调用 layui.form.val('filter', initialFormData) 即可。但请务必记住紧随其后的一步：调用 layui.form.render()。这对于单选框、复选框、下拉选择框等需要同步更新UI样式的组件至关重要，否则虽然数据值已设置，但视觉显示可能不会同步更新。
以下是一个典型的表单提交成功后进行重置的代码示例：
layui.use(['form'], function(){
var form = layui.form;
// 假设已提前保存好 initialFormData
var initialFormData = {username: 'admin', status: '1', tags: ['1','3']};
form.on('submit(submitDemo)', function(data){
// 表单提交逻辑...
$.post('/api/sa ve', data.field, function(res){
if(res.code === 0){
// 提交成功后，还原表单至初始状态
form.val('demo', initialFormData);
form.render(); // 这一行不可或缺
}
});
return false;
});
});
当然，如果你的表单中集成了非Layui原生的自定义控件（例如标签输入框、富文本编辑器等），它们的值不受 form.val() 方法管理，就需要单独编写相应的重置逻辑来处理。
处理动态Select组件或异步加载选项时的注意事项
这是一个更为复杂且容易出错的场景。设想一下，表单中有一个下拉选择框，其选项列表是动态生成的，甚至依赖于另一个字段的选择（例如经典的省、市、区三级联动）。在提交表单后，这个下拉框的选项可能需要重新从服务器异步获取。
此时面临的问题是：你缓存的“初始值”，可能对应着之前加载的那批选项中的某个ID。但在重置时，如果新的选项列表尚未加载完成，就立即执行 form.val() 去设置这个值，很可能会因为找不到对应的option元素而导致设置失败，最终显示为空。
应对此类动态选项的稳妥方案是：
- 将重置操作与数据加载的时机进行绑定。确保在重新加载Select选项的异步请求完成，并且已调用
form.render('select')重新渲染下拉框之后，再执行form.val()来设置值。 - 或者，采用更彻底的方案：将下拉框初始的
options数据数组也一并缓存下来。重置时，先根据缓存的数据重新绘制整个下拉框的选项列表，然后再设置选中的值。 - 务必避免在选项的DOM元素尚未准备就绪时就去设置值，这样的操作通常是无效的。
此外，还有一个极其隐蔽的“坑”：Layui的 form.val() 方法在设置值时，不会自动触发 该字段的 change 事件。如果你的页面逻辑中监听了下拉框的change事件，用以联动更新其他字段（例如选择某个省份后自动加载城市列表），那么在通过 form.val() 重置表单后，必须手动触发一下这个change事件，才能确保整个表单的联动状态是正确的。
