最近在开发一个性能，一个表单外面有输入框，每个输入框下面有一个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>