表单校验的基本步骤

表单校验的基本步骤

1. 定义验证规则
   定义规则*

data() {
  return {
    // 省略其他...
    rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur'},
          { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger:'blur'},
          { 
        validator: function (rule, value, callback) {
      	  // rule     : 当前的规则
          // value    : 被校验的值
          // callback : 回调 
          //      如果通过了规则检验，直接调用callback()
          //      如果没有通过规则检验，调用callback(错误对象，在错误对象中说明原因)。       if(rule){
                  callback()
                }else{
                  callback(new Error('错误说明') )
                }
        	//      callback(new Error('错误说明'))
      	   }, 
      	
        trigger: 'blur'// 验证的时机
     } 
        ],
    }
  }
}

3. 配置模板，应用规则
   将规则应用到模板中*
   主要是:

   1. el-form上的ref, model, rules
   2. el-form-item上的prop
      给表单中的元素（Form-Item ）设置 prop 属性，其值为设置为需校验的字段名

4. 手动兜底验证

this.$refs.form.validate(valid => {
    if (valid) {
    
    }
  })
}