vue clearValidate() 清除表单校验无效

15,481 阅读1分钟

一般我们通过this.$refs.formName.clearValidate()来清除校验

如果没效果,可以先检查一下是否在form表单里声明了ref的值,定义的ref和拿取的ref值一定要一样,如下

<el-form :model="xxxForm" :rules="xxxRules" ref="formName" >
this.$refs.formName.clearValidate()

如果还没效果,可以给外面包裹个this.$nextTick,如下

this.$nextTick(() => {  this.$refs['formName'].clearValidate();});

如果还没效果,可以修改表单的拿取方式,如下

this.$nextTick(() => {  
  this.$refs.formName.clearValidate();
});

一般情况就好了,不一般的情况暂时还没碰到。

如果想给单个的表单项清除校验,如下

<el-form-item ref="nameRef" prop="name">

this.$refs.nameRef.clearValidate();

或者不写ref,直接通过el-form-item里的prop值来搞
this.$refs.formName.clearValidate('name');

如果想清除表单的值

this.$refs.formName.resetFields()

或者

this.$refs['formName'].resetFields()

如果不行,外面包一层,如下

this.$nextTick(() => {  
  this.$refs.formName.resetFields();});

这个办法有时候没用,所以没办法的时候咱们就直接赋值

this.xxxForm={name: '', age:'', mobile: ''}

如果想清除单个form-item的值

可以跟上面一样,给formItem定义一个ref,如下

<el-form-item ref="nameRef" prop="name">

this.$refs.nameRef.resetField();
或者不写ref,直接通过el-form-item里的prop值来搞
this.$refs.formName.resetField('name');