el-form自定义校验

el-form 提供了很多内置的表单校验规则，但是有时候我们需要自定义校验规则来满足业务需求。在 el-form 中自定义校验可以通过 rules 属性来实现。具体步骤如下：

1. 在 el-form 中设置 rules 属性，并定义一个对象来存储自定义校验规则，例如：

<el-form :model="form" :rules="rules">
  ...
</el-form>

data() {
  return {
    form: {
      ...
    },
    rules: {
      name: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
        { validator: this.checkName, trigger: 'blur' }
      ]
    }
  }
},

2. 在 rules 对象中定义校验规则，可以使用内置的校验规则，也可以自定义 validator 规则。例如：

checkName(rule, value, callback) {
  const reg = /^[\u4e00-\u9fa5]{2,4}$/; // 中文姓名的正则表达式
  if (value && !reg.test(value)) {
    callback(new Error('请输入正确的中文姓名'));
  } else {
    callback();
  }
}

在自定义 validator 规则中，第一个参数 rule 是当前校验规则的配置对象，第二个参数 value 是当前表单项的值，第三个参数 callback 是回调函数，用于返回校验结果。如果校验不通过，需要调用 callback(new Error('错误提示')) 方法，如果校验通过，则直接调用 callback() 方法即可。

3. 在 el-form-item 中设置 prop 属性来指定当前表单项的 model 字段，并设置 :rules 属性来指定当前表单项的校验规则。例如：

<el-form-item label="姓名" prop="name">
  <el-input v-model="form.name"></el-input>
</el-form-item>

通过以上步骤即可实现 el-form 中的自定义校验。