Layui表单提交后怎么重置为初始数据（非清空表单）-Layui教程-PHP中文网

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 必须）。

jQuery金融借款单提交表单

jQuery金融借款单提交表单，包含出借金额和日期的选择，且自动计算利息，非常的简单方便。

下载

示例代码片段：

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() 管理，得单独处理。