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

39次阅读

共计 1991 个字符，预计需要花费 5 分钟才能阅读完成。

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

正文完