element UI 表单验证的基本步骤

1. 定义验证规则

例如：

其中validator为自定义校验规则函数定义在data中，

data(){
// 自定义校验名字规则
    const validateName = (rule, value, callback) => {
 
    }
    return{
        rules:{
            name: [{ required: true, message: '部门名字不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger: 'blur' },
          { validator: validateName, trigger: 'blur' }],
        }
    }
}

其中rule：采用的规则

value: 被校验的值

callback是回调函数

如果通过了规则检验，就直接调用callback()

如果没有通过规则检验，就调用callback(错误对象，在错误对象中说明原因)

无论成功还是失败callback必须要调用

2. 配置模板，应用规则

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

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

<el-form ref="deptForm" :model="form" :rules="rules" label-width="120px">
    ...
</el-form>

给表单中的元素（Form-Item ）设置 prop 属性，其值为设置为需校验的字段名

<el-form-item label="部门介绍" prop="introduce">
     ...
</el-form-item>

3. 手动兜底验证

在表单元素中item项中的确定按钮绑定提交

<el-form-item>
     <el-button type="primary" size="small" @click="hSubmit">确定</el-button>
     <el-button size="small" @click="hCancel">取消</el-button>
</el-form-item>

onSubmit() {
  // 表单验证
  this.$refs.form.validate(valid => {
    //若果验证成功  做什么
    if (valid) {
    	do something...
    }
  })
}