layui.form.reset()会清空所有字段,因其本质是触发原生form.reset(),仅识别HTML中写死的value/checked/selected属性,不保留JS动态设置的值;需手动保存并恢复目标字段值,或用defaultValue临时欺骗、form.val()快照等方式实现选择性重置。
layui.form.reset() 会清空所有字段,包括你不想动的 input
调用 layui.form.reset() 实际是触发原生 form.reset(),它只认 html 中写死的 value、checked、selected 属性,不保留 js 动态设的值——更不会“跳过”某个字段。所以如果你有个搜索关键字输入框想保留,直接 reset 就全没了。
重置前手动保存并恢复目标字段的值
核心思路:不依赖 reset,而是自己清空其他字段,再把要保留的字段值“放回去”。适用于有明确保留字段(比如 keyword、userId)的场景。
- 先用
document.querySelectorAll('#myForm input:not(#keepInput), #myForm select:not(#keepSelect)')选中所有**非保留字段**,逐个设el.value = ''或el.selectedIndex = 0 - 对 checkbox/radio,设
el.checked = false(注意:不能只改defaultChecked,那是初始状态) - 保留字段(如
#keepInput)完全不动,或显式赋回原值:document.getElementById('keepInput').value = savedKeyword - 最后调用
layui.form.render()或layui.form.render('select')更新 layui 渲染的 UI(尤其下拉框、开关等)
用 defaultValue 暂时“欺骗”原生 reset(仅限简单表单)
如果表单结构简单、没用 layui 渲染复杂控件(如 lay-select、lay-date),可以临时篡改目标 input 的 defaultValue,让原生 reset 把它当“初始值”:
- 重置前执行:
const keepEl = document.getElementById('keepInput'); keepEl.defaultValue = keepEl.value; - 再调用
document.querySelector('#myForm').reset()或layui.form.reset() - 重置后立刻还原
defaultValue(否则下次 reset 还会保留):keepEl.defaultValue = '';
⚠️ 注意:此法对 layui 渲染的 select、checkbox 无效,因为它们的 UI 状态不依赖原生 defaultSelected/defaultChecked。
配合 form.val() 管理带 layui 渲染的表单
若整个表单都用 layui.form.val('filter', data) 填充过,最稳的方式是维护一个“可重置数据快照”:
- 初始化后立刻缓存:
const initialFormData = JSON.parse(JSON.stringify(data)); - 重置时,先清空你想重置的字段(比如
status、category),但保留keyword字段在initialFormData中的值 - 再调用
layui.form.val('filter', initialFormData),然后layui.form.render() - 特别注意:对
select,必须加layui.form.render('select'),否则 UI 不更新
真正麻烦的不是怎么“留一个值”,而是 layui 把 DOM 和 UI 分开了——改了 value,UI 不一定动;改了 UI,DOM 不一定同步。动手前先确认你要留的字段是否被 layui 接管了渲染逻辑。


















