element-ui 如何控制form-item错误的显示

Question

常规的用法我知道, 但是我的情形有点特殊, 一个验证手机号码的表单, 有两个按钮, 一个是常规的"提交", 另外一个是"获取验证码", 点击后者时, 需要单独做一些验证, 这个似乎只有通过设置el-form-item的error属性来实现. 但是form的validate方法所触发的错误会导致"获取验证码"触发的错误无法显示. 我想问下form的validate方法所触发出来的错误是存在哪儿的?如何通过编程的方式手动消除?

DEMO:
https://github.com/xiangnansc...

相关代码:

<template>
  <el-form :model="formData" :rules="rules" ref="registerForm" label-position="right" label-width="6em">
    <el-alert v-if="errors.__all" :title="errors.__all" type="error" :closable="false"></el-alert>
    <el-form-item label="手机号" prop="phone" :error="errors.phone">
      <el-input v-model="formData.phone" auto-complete="off" placeholder="请输入11位手机号"></el-input>
    </el-form-item>
    <el-form-item label="验证码" prop="code" :error="errors.code">
      <el-row>
        <el-col :span="12">
          <el-input v-model="formData.code" auto-complete="off" width="50px"></el-input>
        </el-col>
        <el-col :span="12">
          <el-button type="primary" @click="sendCode" style="margin-left:8px">
            获取验证码
          </el-button>
        </el-col>
      </el-row>
      <div v-if="codeValid && !errors.code" class="el-form-item__error" style="color:green">验证码已发送, 请注意查看手机</div>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">
        提交
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>

export default {
  computed: {

  },
  data() {
    return {
      codeValid: false,
      errors: {
        phone: '',
        code: '',
      },
      formData: {
        phone: '',
        code: '',
      },
      rules: {
        phone: [
          { required: true, message: '必须提供11位手机号',  },
          { pattern: /^\d{11}$/,  message: '请输入11位数字手机号', trigger: 'blur' },
        ],
        code: [
          { required: true, message: '必须提供验证码', trigger: 'blur' },
          { pattern: /^\d{6}$/,  message: '请输入6位数字验证码', trigger: 'blur' },
        ],
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
            setTimeout(() => {
                this.errors = {phone: '无效手机号'}
            }, 1000)
        } else {
          return false;
        }
      });
    },
    sendCode() {
      var phone = this.formData.phone
      if (!/^\d{11}$/.test(phone)) {
        this.errors.code = '请先输手机号'
        return
      }
      setTimeout(()=>{
        this.errors = {code: '无效验证码'}
      }, 1000)
    },
  },
}
</script>

Answer 1

clearValidate() 这个方法可以实现

Answer 2

这个我也遇到了怎么解决的

Answer 3

googl 了一下，没有找到答案，自己摸索下：希望帮到后面搜索的小伙伴，如果有其他经验也可以分享。
经实验：（我是数组，有循环，可以忽略）

item.subscriptionKeyNameError = 我是真滴真滴错了+${Tools.uuid()};

 <el-form-item
                :label="$t('pages.ccs_info_share.subscription_key')"
                prop="subscriptionKeyName"
                :rules="[{ required: true, message: ' ', trigger: ['blur', 'change'] }]"
                :error="outerForm.subscriptionKeyNameError"
                :show-message="false"
                :ref="`subscriptionKeyName-${outerIndex}`"
              >
                <el-input
                  v-model="outerForm.subscriptionKeyName"
                  :placeholder="$t('pages.ccs_info_share.holder.subscription_key')"
                ></el-input>
              </el-form-item>

          
       总结：   给 el-form-item 的props【「error」】添加一个uuid，可以满足要求！

Answer 4

可以通过change事件监听按钮改变this.$set('rules',options,value)重新指定对应的prop 的validate