表单校验的基本步骤

1.定义验证规则, 例:

rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门名称为1~50个字符', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门编码为1~50个字符', trigger: 'blur' },
          {validator: validCode, trigger: 'blur'}
        ],
        manager: [
          { required: true, message: '部门负责人不能为空', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: 'blur' },
          { min: 1,max: 300,message: '部门介绍要求1~300个字符',trigger: 'blur'}
        ]
      }
    }

2. 配置模版, 应用规则

   -给表单设置rules属性传入验证规则

   -给表单设置model属性传入表单数据

   -给表单中元素(Form-Item)设置 prop 属性, 其值为设置为需要校验的字段名

    <el-form ref="deptForm" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="部门名称" prop="name">
        </el-form-item>
    </el-form>

3. 手动兜底校验

    this.$refs.deptForm.validate((valid) => {
        if(valid) {
            // 通过校验后要执行的代码
        }
    }