1.数据中配置 rules 对象和 key

对象中包含对应的校验规则集合 key 值

• 这里的key值的命名需要与校验的对象名一致
• 否则在触发require属性是会出现校验不通过
• 数据为 tmName key的值也需要是tmName

data() {
    return {
        tmName: '张三',    ----数据名
        age: 18,
        //配置 rules 对象  和 key 值
>       rules: {
>         tmName: [],     ----与数据名报保持一致
>         logoUrl: [],
      },
}

2.给from表单绑定rules

注意进行校验的表单必须绑定 :rules=""

<el-form :rules="rules" >

3.给需要校验的每一项内容绑定prop属性

• prop属性可以绑定在 el-form-item 也可以绑定在 el-input
• 绑定位置决定红色 * 号位置
• v-model中绑定的数据就是被校验的数据

<el-form-item prop="tmName" label="项目">
    <el-input  v-model="被校验数据"></el-input>
</el-form-item>

4.给每个校验规则集合key,添加对应的校验规则

rules: {
        tmName: [
           //规则一 : 是否必传    , 触发条件:数据改变
>             { required: true, message: "品牌名不能为空", trigger: "change" },
           //规则二 : 规则名      , 触发条件:失去焦点
>             { 规则名: 执行函数, message: "报错信息", trigger: "blur" },  
        ],
        logoUrl: [
>             { required: true, message: "图片不能为空", trigger: "blur" }
        ],
      },

5.自定义校验规则

5.1在data函数内内定义函数回调validatorTm

//rule 包含该对象校验规则对象
//value 当前被校验的的值
//callback 通过校验回调 必须调用
//callback();成功
//callback(new Error("品牌名称长度在2到10个字符之间")); 失败
data() {
>   var validatorTm = (rule, value, callback) => {...};
    return {
      tmName: '张三',
      age: 18,
      rules: {
        tmName: [...],
        logoUrl: [...],
      },
    };

5.2.把自定义的规则回调 validatorTm 插入对应的key数组中

rules: {
    tmName: [      
>       {validator: validatorTm,trigger: "change",}
    ],
    logoUrl: [...],
},

6.提交时的表单验证

6.1给from表单增加ref属性 formName

<el-form :rules="rules" ref="formName">

6.2 添加 :rules='' 属性的Dom元素获得validate方法

• 通过$refs获得该表单的Dom元素,调用validate方法
• 当表单整体校验通过时该方法内 回调函数的第一个参数valid 为true

this.$refs.formName.validate(async (valid) => {
    if(valid===true){
        //表单校验通过
    }else{
        //表单校验未通过
    }
}