Layui表单提交后怎么重置为初始数据：非清空表单

layui.form.reset() 调用原生 reset，仅恢复 HTML 初始属性值；若表单由 JS 动态填充，需手动缓存初始数据并用 form.val() 还原，配合 form.render() 和必要时的 change 事件触发。

layui.form.reset() 会清空表单，不是重置为初始值

很多人调用 layui.form.reset() 后发现所有输入框都变空了，连默认选中的 radio、checkbox 和下拉框的默认选项都没了——这是因为这个方法本质是调用原生 form.reset()，只认 html 中的 value、checked、selected 等初始属性，不感知你后来用 js 动态设置的值。

如果你的表单初始状态是通过 JS 渲染（比如 layui.form.render() 后用 layui.form.val('demo', {...}) 填的），或者后端返回数据动态填充的，那原生 reset 就完全失效。

真正要“回到初始数据”，得自己记下初始值，并手动还原。

手动保存初始值的两种可靠方式

关键是在表单渲染完成、首次赋值之后，立刻把当时的数据快照存下来。推荐以下两种做法：

• 如果用 layui.form.val('filter', data) 填充过表单，就在调用后立即缓存 data 对象，比如：initialFormData = JSON.parse(JSON.stringify(data))（深拷贝防引用污染）
• 如果表单是服务端直出 + JS 补充渲染（如 select 用 layui.form.render('select')），那就用 document.querySelectorAll('input, select, textarea') 扫描所有控件，读取它们的 defaultValue、defaultChecked、defaultSelected 属性，拼成初始对象

注意：不要用 form.elements 直接遍历，部分 layui 渲染的控件（如开关、时间选择器）不在原生 elements 中；优先以你实际调用 form.val() 传入的数据为准。

用 form.val() 主动还原初始值

有了初始数据对象，还原就很简单：直接再调一次 layui.form.val('filter', initialFormData)，然后触发一次 layui.form.render()（尤其对 radio、checkbox、select 必须）。

示例代码片段：

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/save', data.field, function(res){      if(res.code === 0){        // 提交成功后还原        form.val('demo', initialFormData);        form.render(); // 这行不能少      }    });    return false;  });});

注意：如果表单里有非 layui 原生控件（如自定义的 tag 输入、富文本），它们的值不会被 form.val() 管理，得单独处理。

遇到动态 select 或异步加载选项时的坑

如果某个 select 的选项是提交后重新拉取的（比如省市区二级联动），那它的“初始值”其实依赖于当时的选项列表。此时单纯还原 form.val() 可能报错或显示空白，因为选项 DOM 还没加载完。

稳妥做法是：

• 在重新加载 select 数据的请求完成、且调用 form.render('select') 之后，再执行 form.val()
• 或者把 select 的初始 options 数组也一并缓存，等需要还原时先重绘选项，再设值
• 避免在 select 还没渲染完成时就调 form.val()，否则值会被忽略

最易被忽略的是：layui 的 form.val() 不会自动触发 change 事件，如果业务逻辑依赖 select change 来联动其他字段，还原后得手动 trigger('change')。