form表单校验，有数据，但是提示文字不消失

参考文章~

---

      

1、填写表单验证规则时需要定义数据校验类型：

        例如：如此处为object，【更新后的数据类型要与定义校验的一致，否则校验不通过，提示文字也不会消失。】

2、有数据后，需要将数据赋值给表单数据，并重新自定义校验：

 this.$refs.yourFormName.validateField('propsName');

data(){
    return{
        articleForm:{
            cover:'',
        },
        formRules:{
            cover:[
                { required: true, type:'object', message: '请上传封面', trigger: 'change' }
            ]
        }
    }
},

methods:{
    uploadImg(res){
        this.articleForm.cover = res.data;  // 获取到数据后，赋值给表单元素
        this.$refs.articleForm.validateField('cover');  // 重新校验
    }
}

---

拓展情况：

        同一个表单中，存在可有可无的字段时，该字段需要用 v-if 来控制。不展示该表单选项时，该项值赋予特定的内容（不在可选列表当中）。

        

         

<FormItem v-if="(form.formType == '1')" label="学校类型" prop="type">
   <Select style="width:650px" v-model="form.type" placeholder="学校类型" clearable>
       <Option v-for="item in typeList" :key="item.id" :value="item.id" >{
   
   { item.name }}</Option>
   </Select>
</FormItem>

type: [
    { required: true, type: 'number', message: '请选择学校类型', trigger: 'change' }
],

// 提交函数
submitForm(){
    if ( this.form.formType == '2' ) {
       this.form.type = 0;             // 第二种表单，该值赋为0
    } else {                 
       if ( this.form.type === 0 ) {   // 切回第一种表单，在界面上看该值为空，实则为上面改变的值，我们手动置空，触发新一轮的表单验证
           this.form.type = '';
        }
    }
    this.$refs[name].validate((valid) => {
        // 表单验证通过，处理...
    }
}