element ui 表单验证 清空内容后 提示 xx is required

Question

<el-form ref="supply" :model="supply" :rules="rules" label-width="157px">
<el-form-item label="联系人手机：" :required="true" prop="phone">
                            <el-input v-model="supply.phone" maxlength="13"></el-input>
                        </el-form-item>
</el-form>

data () {
    var checkphoneNum=(rule,value,callback)=>{
        let patter = new RegExp(/^1\s*[3456789]\s*(\d\s*){9}$/);
        if(value == ""){
            return callback(new Error('不能为空'));
        }else if(!patter.test(value)){
            return callback(new Error('手机号码格式不正确'));
        }else{
            callback();
        }
    };
    return{
        
supply:{
            phone:'',
           },
rules:{
   tel:[
    { validator: checkphoneNum, trigger: 'blur' }
   ],
   }

watch:{
      supply:{
          handler(newValue, oldValue){
            if(newValue.phone.length == 0){
                this.$refs['supply'].clearValidate('phone');
            }
          deep:true
      }
  },

我想清除当前 input 的内容 在退格键清空的时候 就会 is required

this.$refs['supply'].clearValidate('phone');

这个方法用错了吗？

Answer 1

出现错误提示，是因为你phone字段设置了required，必填项，只要你在输入框中聚焦离开后就会触发，未填写和输入后删除完都是没有值，则触发非空校验，所以才会有提示。

你的方法没有错，相当于先触发了你的清除信息错误，在触发了内置的校验，所以你看见提示信息还在。

你一定要清除提示，可以在事件blur或是change，判断这个值为空，这在清除，但是这个需要借助setTimeout或是$nextTick，否则还是和你目前效果一样，要让清除信息在验证之后就可以了。

if (!this.supply.phone) {
    // 或是setTimeout都可以
    this.$nextTick(() => {
        this.$refs['supply'].clearValidate('phone');
    })
}

Answer 2

你的方法没错，但是这个校验是异步的，也就是说，先执行了你的清空代码，他才去校验的
如果你非要这样做，可以给这串代码加setTimeout
不过不建议这样做 会有闪现的感觉很不友好 而且失焦后还会触发校验
最好不要用required 而是在rules里加自定义规则

Answer 3

还有一个方法，不用required属性。通过添加is-required类名来添加必选的那个红色图标

<el-form-item label="联系人手机：" class="is-required" prop="phone">
    <el-input v-model="supply.phone" maxlength="13"></el-input>
</el-form-item>

Answer 4

我也遇到同样的问题
后来发现原因是我在el-form-item上面用了required属性，同时在el-input里面的校验规则加了required: true，然后导致有两个验证规则。然后导致会触发两种校验。在form上面的校验会显示默认的英文提示。

我删掉el-form-item上面的required属性就解决了。

参考文章：
https://blog.csdn.net/ClamJ09...

Answer 5

你看下官方DEMO，是在SUBMITFORM的时候来检测的