el-form 组件自带的表单验证功能重置表单验证功能

最新推荐文章于 2025-05-20 17:59:56 发布

一个拉G的前端

最新推荐文章于 2025-05-20 17:59:56 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/fdadfas/article/details/122590911

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在Vue中使用el-form组件进行表单验证，并提供了重置表单验证的方法。通过设置:rules属性并调用clearValidate方法，可以轻松实现表单验证的初始化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-form 有自带的表单验证方法在el-form标签上面加上:rules在data里面配置验证规则就行
有时候需求需要重置表单验证
使用 this.$refs[‘ruleForm’].clearValidate()，clearValidate清除表单的验证

  dialogFormVisible(val) {
      if (!val) {
        for (var key in this.dataForm) {
          this.dataForm[key] = ''
        }
        this.dataForm.state = '1'
        this.dataForm.naem = ''
        //当dialog对话框关闭的时候 就重置ref为ruleForm的表单验证
        this.$refs['ruleForm'].clearValidate()
        this.isUpd = false
      }
    },