elment-ui表单校验

一、基本用法
<el-form :model="form" :rules="rules" ref="testForm">
<el-form-item label="姓名" prop="name" ref="validateName">
    <el-input v-model.trim="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
    <el-input v-model.trim="form.age"></el-input>
</el-form-item>
</el-form>

data(){
    return{
        form:{
            name:'',
            age:''
        },
        rules:{
            name:[
                {required: true, message: '请输入姓名', trigger: 'blur'}
            ],
            age:[
                {required: true, message: '请输入年龄', trigger: 'blur'}
            ]
        }
    }
}

//校验整个表单 
Function(callback: Function(boolean, object))
this.$refs.testForm.validate(valid=>{
    if(valid){
        //校验通过后的逻辑
    }
});

//校验单个
Function(props: array | string, callback: Function(errorMessage: string))
this.$refs.testForm.validateField('name');

//重置整个表单
 this.$refs.testForm.resetFields();
 
 //重置单个
 this.$refs.validateName.resetField();
 
 //移除表单校验的结果
 this.$refs.testForm.clearValidate();
 
 //移除指定表单元素的 校验结果
 方法1：
 Function(props: array | string)
 this.$refs.testForm.clearValidate('name');
 
 方法2：
 this.$refs.validateName.clearValidate();
 

二、校验列表
<el-form :model="form" :rules="rules" ref="testForm">
<template v-for="(item,index) in form.list" :key="index">
    <el-form-item label="姓名" 
        :prop="`list[${index}].name`" 
        :rules="rules.name" 
        ref="validateName">
        <el-input v-model.trim="item.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄" 
        :prop="`list[${index}].age`" 
        :rules="rules.age">
        <el-input v-model.trim="item.age"></el-input>
    </el-form-item>
</template>
</el-form>

data(){
    return{
        form:{
           list:[
               {
                   name:'',
                   age:''
               },
               {
                   name:'',
                   age:''
               }
           ]
        },
        rules:{
            name:[
                {required: true, message: '请输入姓名', trigger: 'blur'}
            ],
            age:[
                {required: true, message: '请输入年龄', trigger: 'blur'}
            ]
        }
    }
}

//校验整个表单 
this.$refs.testForm.validate(valid=>{
    if(valid){
        //校验通过后的逻辑
    }
});

//移除指定表单元素的校验信息,index为传入的要移除校验信息的项的在列表中的下标
this.$refs.validateName[index].clearValidate();

三、动态改变校验规则
应用场景：需要校验两个参数都填或都不填，不能只填一个
<el-form :model="form" :rules="rules" ref="testForm">
<el-form-item label="姓名" prop="name" ref="validateName">
    <el-input v-model.trim="form.name" @change="nameChange"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age" ref="validateAge">
    <el-input v-model.trim="form.age" @change="ageChange"></el-input>
</el-form-item>
</el-form>

data(){
    return{
        form:{
            name:'',
            age:''
        },
        rules:{
            name:[
                {required: false, message: '请输入姓名', trigger: 'blur'}
            ],
            age:[
                {required: false, message: '请输入年龄', trigger: 'blur'}
            ]
        }
    }
}

nameChange(){
    this.valdateFormInfo();
}

ageChange(){
    this.valdateFormInfo();
}

//校验name和age不能只填一个
valdateFormInfo(){
    if(this.form.name||this.form.age){
        this.rules.name[0].required=true;
        this.rules.age[0].required=true;
    }else{
        this.rules.name[0].required=false;
        this.rules.age[0].required=false;
        //移除校验结果
        this.$refs.validateName.clearValidate();
        this.$refs.validateAge.clearValidate();
    }
}