重置表单验证信息

这个问题主要出现在dialog里面,就是在打开弹出框,表单验证不通过,会出现提示信息,不进行任何处理关闭后第二次打开,这些提示信息依旧显示。有两种实现方式:

1、重置表单信息,刷新页面

原文链接:https://www.cnblogs.com/hezihao/p/7416820.html

2、利用watch监视dialog的显示状态,重置表单

这种方式也有人写过,我改动了一点点,原文链接:https://blog.youkuaiyun.com/caijunfen/article/details/79708192

代码如下:

<el-dialog title="编辑"
    :visible.sync="editFormVisible">
    <el-form></el-form>
</el-dialog>

watch: {
    editFormVisible(val,newVal) { //监视dialog状态(打开、关闭)
        if(val) {
            try {
                this.$refs['editForm'].resetFields(); //重置编辑表单
            } catch (e) {

            }
        }

    }
}
### Element UI 表单验证重置方法 在使用 `Element UI` 的过程中,当需要清除用户的输入并移除所有的校验结果时,可以调用表单实例上的 `resetFields()` 方法[^5]。 此方法会遍历所有注册过的含有规则的字段,并将其值设为空字符串或默认值(如果定义了),同时也会清空这些字段对应的校验状态。这使得用户可以在点击取消按钮或其他逻辑触发点之后轻松恢复初始状态。 下面是个简单的例子展示了如何在个对话框关闭事件中执行这操作: ```html <template> <div> <!-- 对话框 --> <el-dialog :visible.sync="dialogVisible"> <el-form ref="formRef" :model="formData" :rules="rules"> <el-form-item label="用户名" prop="username"> <el-input v-model="formData.username"></el-input> </el-form-item> <!-- 更多表单项... --> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="handleCancel">取 消</el-button> <el-button type="primary" @click="handleSubmit">确 定</el-button> </span> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false, formData: {}, rules: { username: [ { required: true, message: "请输入用户名", trigger: "blur" } ] } }; }, methods: { handleCancel() { this.dialogVisible = false; this.$nextTick(() => { this.$refs.formRef.resetFields(); }); }, handleSubmit() {} } }; </script> ``` 在这个示例里,在 `handleCancel` 方法内部先隐藏对话框再利用 `$nextTick` 来确保 DOM 更新完成后再去重置表单数据和校验信息[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小木

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值