elementui表单验证动态修改required，并且实时更新是否展示报错提示

最近在开发一个功能，一个表单里面有输入框，每个输入框上面有一个switch开关，开启则必填，不开启的话则该输入框的值可以为空。
我把校验规则写在了el-form-item上面：

        <el-form-item label="姓名" prop="name" :rules="[{ required: Number(temp.isName), message: '姓名不能为空'}]">
          <el-input v-model.trim="temp.name" show-word-limit maxlength="45" type="text" placeholder="请输入姓名" />
        </el-form-item>

这样开启和关闭时可以解决表单校验的问题，但是现在会出现一个问题，当switch开启的时候，我触发了校验，然后再关闭switch，点击确认，但是页面上的报红提示依旧存在。虽然这时候校验已经去掉了，除非触发了输入框的blur事件，才能把报红提示去掉。

后来查找了文档，发现了clearValidate方法。官网这样解释: 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果。
我拿到这个方法监听switch的关闭事件，当switch关闭后去掉对应的表单校验，就可以实时更新页面上的报红提示了：

      watch: {
        // 监听姓名开关关闭时，去掉 "姓名不能为空" 的校验
        'temp.isName'(val) {
          if (val == '0') {
            this.$refs['dataForm'].clearValidate('name');
          }
        },
      },

下面是完整代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>element-ui开发: 选中赠品弹层中的数据并展示在页面上，弹层展示选中状态</title>
  <!--引入 element-ui 的样式，-->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  <!-- 引入element 的组件库-->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #app {
      margin: 100px;
    }

    .switch-wrap {
      position: relative;
    }

    .el-switch {
      position: absolute;
      top: 10px;
      left: 50px;
    }
  </style>
</head>

<body>
  <div id="app">
    <el-form ref="dataForm" :inline="true" label-width="80px" :model="temp" label-position="top">
      <div class="switch-wrap">
        <el-switch v-model="temp.isName" active-value="1" inactive-value="0"></el-switch>
        <el-form-item label="姓名" prop="name" :rules="[{ required: Number(temp.isName), message: '姓名不能为空'}]">
          <el-input v-model.trim="temp.name" show-word-limit maxlength="45" type="text" placeholder="请输入姓名" />
        </el-form-item>
      </div>
    </el-form>
    <el-button type="primary" @click="submitFun">确认</el-button>
  </div>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          // 表单数据
          temp: {
            isName: "1",
            name: ''
          },
        }
      },
      watch: {
        // 监听姓名开关关闭时，去掉 "姓名不能为空" 的校验
        'temp.isName'(val) {
          if (val == '0') {
            this.$refs['dataForm'].clearValidate('name');
          }
        },
      },
      methods: {
        // 赠品弹层点击确认
        async submitFun() {
          await this.$refs.dataForm.validate()
          console.log(this.temp, '表单数据')
        },
      }
    })
  </script>
</body>

</html>

elementui表单验证动态修改required，并且实时更新是否展示报错提示

我的一个道姑朋友

引用和评论

微信小程序:修改对象数组中的某个元素

100个React最佳实践小技巧

2024最全ECharts 实战大全（速记版+资源）

Jerry和您聊聊Chrome开发者工具

一些react使用小技巧（中）

如何在仓库中添加只对自己生效的.gitignore规则？

真是惭愧，直到今天，我才搞懂桶排序算法