Layui表单提交后如何重置到初始值（非清空数据）

在Layui开发中，表单的“重置”操作是常见需求，但许多开发者会遇到一个典型问题：调用 layui.form.reset() 后，表单并未回到初始状态，反而被完全清空。这背后的原因并不复杂，但解决方法需要一些技巧。

layui.form.reset() 为何会清空表单

你可能会发现，点击“重置”按钮后，原本默认选中的单选框、复选框或下拉框预设选项都消失了。问题的根源在于该方法本质上调用的是HTML原生的 form.reset()。这个方法的特点是只识别HTML标签中静态定义的初始属性值，例如 value、checked、selected。

然而在实际项目中，表单的初始状态往往并非静态。更多情况下，表单数据是通过JavaScript动态渲染的：例如页面加载后通过 layui.form.val('demo', {...}) 从接口获取数据填充，或对下拉框等组件执行 layui.form.render()。对于这些通过JS动态设置的值，原生 reset() 方法无法识别，只会将表单恢复到HTML源码中的初始空白状态，导致“清空”而非“重置”。

因此，要实现真正的“回到初始数据”，关键在于手动保存并还原初始状态。

手动保存初始值的两种方法

核心思路是在表单首次完成渲染和赋值时，立即保存当前数据。以下是两种常用且可靠的方法：

• 基于赋值数据缓存：如果使用 layui.form.val('filter', data) 填充表单，最直接的方法是在调用后立即对传入的 data 对象进行深拷贝存储，例如：initialFormData = JSON.parse(JSON.stringify(data))。深拷贝可避免后续操作意外修改缓存数据。
• 基于DOM默认属性扫描：如果表单由服务端直接渲染HTML（包含初始值），前端仅进行样式渲染（如渲染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事件，以确保整个表单的联动状态正确。