vue 校验规则

<!-- 一定要记得写 ref和rules；并且 el-form-item 要写prop  -->
<el-form
      ref="form"
      :model="formModel"
      :rules="rules"
    >
      <el-form-item label="分支名称" prop="branch">
        <basic-select
          v-model="formModel.branch"
          :options="branchOptions"
          placeholder="选择分支名称"
          @change="selectBranch"
        />
      </el-form-item>
</el-form>

<!-- 导入  -->
import RulesBuilder from '@/utils/validator/rulesBuilder';
const builder = new RulesBuilder();
builder.field('branch', '分支名称').required({ message: '请选择分支名称' });


private rules = builder.build();

<!-- 提交之前进行校验  -->
private async confirm () {
   if (!(await (this.$refs.form as Form).validate())) {

   }
 }

RulesBuilder文件

import FieldBuilder from './fieldBuilder';

const DEFAULT_OPTS = {
  trigger: 'blur'
};

export default class RulesBuilder {
  private readonly defaultOpts?: any;
  private readonly fields: FieldBuilder[] = [];

  constructor (defaultOpts?: any) {
    this.defaultOpts = { ...DEFAULT_OPTS, ...defaultOpts };
  }

  public field (field: string, fieldName: string, opts?: any) {
    const b = new FieldBuilder(field, fieldName, { ...this.defaultOpts, ...opts });
    this.fields.push(b);
    return b;
  }

  public build () {
    const rules = {} as { [key: string]: any[] };
    this.fields.forEach(f => {
      rules[f.field] = f.rules;
    });
    return rules;
  }
}

FieldBuilder文件，放入自己写的一些规则，可以看一下下面的规则
https://doc.mini.talelin.com/component/form/rules.html

// please refert to https://github.com/yiminghe/async-validator
export default class FieldBuilder {
  public readonly field: string;
  public readonly rules: any[] = [];
  private readonly defaultOpts?: any;

  constructor (field: string, fieldName: string, defaultOpts?: any) {
    this.field = field;
    this.defaultOpts = { fullField: fieldName, ...defaultOpts };
  }

  public append (rule: any, opts?: any) {
    this.rules.push(Object.assign(rule, this.defaultOpts, opts));
    return this;
  }

  public required (otherRules?: object, opts?: any) {
    return this.append({ required: true, ...otherRules }, opts);
  }

  public conditionAndRequired (opts?: any) {
    this.required({ pattern: '^[A-Za-z0-9-]+$' }, opts);
  }

  public typeStringRequired (opts?: any) {
    this.required({ type: 'string' }, opts);
  }

  public typesArrayRequired (opts?: any) {
    this.required({ type: 'array' }, opts);
  }

  public min (value: number, opts?: any) {
    return this.append({ min: value }, opts);
  }

  public max (value: number, opts?: any) {
    return this.append({ max: value }, opts);
  }

  public range (min: number, max: number, opts?: any) {
    return this.append({ min, max }, opts);
  }
}