<think>我们正在讨论
Layui框架中的
重置按钮。根据引用[2]，
重置按钮可以通过设置`type="reset"`来实现，这样点击
按钮时会自动
重置表单内的所有元素到初始状态。但有时我们可能需要自定义
重置逻辑，比如在
重置后执行一些额外操作。
在
Layui中，
重置按钮通常有两种实现方式：
1. 使用原生HTML的`<button type="reset">`，利用表单的默认
重置行为。
2. 使用普通
按钮（不设置`type="reset"`）并绑定自定义
重置逻辑。
如果使用第一种方式，只需要在
按钮上设置`type="reset"`，并确保该
按钮在表单内即可。
如果使用第二种方式，我们可以通过
Layui的事件监听或者JavaScript来自定义
重置逻辑。
下面分别给出两种方式的示例：
### 方式一：使用原生
重置按钮
```html
<form class="
layui-form">
<div class="
layui-form-item">
<label class="
layui-form-label">用户名</label>
<div class="
layui-input-block">
<input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="
layui-input">
</div>
</div>
<div class="
layui-form-item">
<div class="
layui-input-block">
<button type="reset" class="
layui-btn
layui-btn-primary">
重置</button>
</div>
</div>
</form>
```
### 方式二：自定义
重置逻辑
有时候我们需要在
重置后执行一些操作，比如
重置表单验证的提示等。这时我们可以使用
Layui的`form`模块。
```html
<form class="
layui-form" id="test-form">
<div class="
layui-form-item">
<label class="
layui-form-label">用户名</label>
<div class="
layui-input-block">
<input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="
layui-input">
</div>
</div>
<div class="
layui-form-item">
<div class="
layui-input-block">
<button type="button" class="
layui-btn
layui-btn-primary" id="reset-btn">
重置</button>
</div>
</div>
</form>
<script>
layui.use('form', function(){
var form =
layui.form;
var $ =
layui.$;
// 自定义
重置按钮的点击事件
$('#reset-btn').on('click', function(){
//
重置表单（将表单域的值
重置为空或默认值）
$('#test-form')[0].reset(); //
重置表单值
// 如果表单中有select等需要重新渲染的元素，则重新渲染
form.render();
// 还可以在这里执行其他
重置后的逻辑，比如清除验证提示
// 注意：
Layui默认的验证提示不会因为reset而清除，需要手动清除
$('.
layui-form-item').removeClass('
layui-form-danger');
$('.
layui-form-item').find('.
layui-form-mid').remove(); // 移除验证提示信息
});
});
</script>
```
注意：在自定义
重置按钮中，我们通过
jQuery的`reset()`方法
重置表单，然后调用`form.render()`重新渲染表单元素（特别是对于select、checkbox等需要样式渲染的元素）。此外，我们还需要手动清除验证错误的提示，因为
Layui的验证提示不会随着表单
重置而消失。
### 总结
- 如果只是简单的
重置，使用`type="reset"`最为方便。
- 如果需要额外的
重置逻辑（如清除验证提示、
重置后执行其他操作等），则使用自定义
按钮并编写相应的事件处理函数。
§§相关问题§§
1. 在
Layui中，如何
重置表单验证的提示信息？
2. 除了
重置按钮，
Layui表单还有哪些常用的
按钮类型？
3. 如何在使用
Layui的表单中实现提交
按钮的异步提交？</think>在
Layui 框架中实现
重置按钮逻辑有两种常用方式：原生表单
重置和自定义
重置逻辑。以下是具体实现方法：
### 方法一：使用原生表单
重置（推荐简单场景）
```html
<form class="
layui-form" action="">
<!-- 表单内容 -->
<div class="
layui-form-item">
<label class="
layui-form-label">用户名</label>
<div class="
layui-input-block">
<input type="text" name="username" required class="
layui-input">
</div>
</div>
<!--
按钮区域 -->
<div class="
layui-form-item">
<div class="
layui-input-block">
<button class="
layui-btn" lay-submit>提交</button>
<!-- 关键代码：type="reset" 触发原生
重置 -->
<button type="reset" class="
layui-btn
layui-btn-primary">
重置</button>
</div>
</div>
</form>
```
**特点**：
1. 添加 `type="reset"` 属性自动
重置表单内所有元素
2. 支持 `<input>`、`<select>` 等原生表单控件
3.
重置为初始值（非清空）
### 方法二：自定义
重置逻辑（推荐复杂场景）
```html
<form class="
layui-form" id="myForm">
<div class="
layui-form-item">
<label class="
layui-form-label">邮箱</label>
<div class="
layui-input-block">
<input type="email" name="email" class="
layui-input" value="default@example.com">
</div>
</div>
<div class="
layui-form-item">
<div class="
layui-input-block">
<button class="
layui-btn" lay-submit>提交</button>
<!-- 自定义
重置按钮 -->
<button type="button" class="
layui-btn
layui-btn-danger" id="customReset">高级
重置</button>
</div>
</div>
</form>
<script>
layui.use(['form', '
jquery'], function(){
var form =
layui.form;
var $ =
layui.$;
// 自定义
重置按钮事件
$('#customReset').click(function(){
// 1.
重置表单值
$('#myForm')[0].reset();
// 2. 清除验证提示
$('.
layui-form-item').removeClass('
layui-form-danger');
$('.
layui-form-mid').remove();
// 3.
重置单选/复选框（示例）
$("input[name='gender']").prop("checked", false);
$("#checkboxDemo").prop("checked", false);
// 4.
重置下拉框（示例）
$("select[name='city']").val("");
// 5. 重新渲染表单
form.render();
// 6. 可添加额外逻辑
layer.msg('表单已
重置');
});
});
</script>
```
### 关键要点说明
1. **
重置范围**：
- 原生 `type="reset"`
重置所有表单字段到初始值
- 自定义逻辑可精确控制
重置行为（如清空、恢复默认值等）
2. **验证提示清除**：
```javascript
// 移除错误样式
$('.
layui-form-item').removeClass('
layui-form-danger');
// 移除错误提示文本
$('.
layui-form-mid').remove();
```
3. **特殊组件处理**：
```javascript
// 下拉框
重置
form.val('filter', {
'selectName'
: '' // 清空选中值
});
// 单选框
重置
$("input[type='radio']").prop("checked", false);
```
4. **表单渲染更新**：
```javascript
form.render(); // 必须调用以更新UI状态
```
### 实际应用建议
- 简单表单直接使用 `type="reset"` 最便捷
- 含动态数据/复杂验证的表单推荐自定义
重置
-
重置后调用 `form.render()` 确保UI同步更新
- 清空场景建议设置 `value=""` 初始值
> 参考
Layui 官方文档：
重置按钮作为表单标准组件支持原生
重置行为[^2]，对于特殊需求可通过 JavaScript 扩展实现[^1]。
本文介绍了如何在layui中使用重置按钮来清除表单数据，包括jQuery与layui的结合使用方法，帮助开发者实现用户输入信息的快速清空功能。
扫一扫
2997
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
