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

<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(/^1s*[3456789]s*(ds*){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');

这个方法用错了吗？

回答

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

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

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

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

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

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

以上是 element ui 表单验证 清空内容后 提示 xx is required 的全部内容， 来源链接： utcz.com/a/30785.html

回到顶部