ant-design-vue 表单验证和 validator 自定义表单验证

在 ant-design-vue 中，提供 FormModel 表单组件，且支持 v-model 数据绑定，同时可以校验和提交功能的表单。

一、表单验证

<a-form-model
  ref="form"
  :rules="rules"
  :model="form"
  layout="inline"
  :label-col="{span: 10}"
  :wrapper-col="{span: 14}"
>
  <a-form-model-item
    label="密码"
    prop="password"
    class="w300"
  >
    <a-input
      v-model="form.password"
      type="password"
    />
  </a-form-model-item>
  ......
</a-form-model>

校验规则：

const rules = {
  username: [{ required: true, message: '该选项必填' }],
  password: [{ validator: validatePass, trigger: 'change'}]
}
rules = Object.freeze(rules)

补充 Object.freeze() 知识点：

Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改；也不能添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举型、可配置性、可写性，以及不能修改已有属性的值。那么 Object.freeze() 使用的应用场景是什么呢？

如果你有一个巨大的数组或者对象，并且确信数据不会修改，使用 Object.freeze() 可以让性能大幅提升。在我的实际开发中，这种提升大约有5~10倍，倍数随着数据量递增。对于纯展示的大数据，都可以使用 Object.freeze 提升性能。Object.freeze() 冻结的是值，你仍然可以将变量的引用替换掉。

对于自定义校验 callback 必须被调用。

const validatePass = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入密码'))
  }
  callback()
}

表单验证功能之 validate 方法：对症表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise。

// 表单验证
this.$refs.form.validate(valid => {
  if (valid) {
    console.log('submit!')
  } else {
    console.log('error')
    return false
  }
})

// 表单重置
this.$refs.ruleForm.resetFields();

在【提交按钮】中，调用上述 validate 方法，获取返回的校验结果即可。

validate () {
  return new Promise((resolve) => {
    this.$refs.form.validate(valid => {
      resolve(valid)
    })
  })
}

我们上述将验证信息使用 promise 进行返回，提交多个表单验证使用，采用 Promise.all 来获取所有表单的验证结果。

async handleSubmit () {
    const formValidate = this.$refs.form ? this.$refs.form.validate : () => Promise.resolve(true)
    let result = await Promise.all([formValidate(), this.$refs.goods.validate()])
    result = result.find(r => r === false)
    if (result === undefined) {

    } else {
        this.$antdMessage.success('信息不完整')
    }
}

二、validator 自定义表单验证

在官方还提供 async-validator 用来异步校验表单。首先我们需要安装依赖：

npm i async-validator

基本用法包括定义一个 descriptor，将其分配给一个 schema，并将要验证的对象和一个回调函数传递给 schema 的 validate 的方法：

import Schema from 'async-validator';
const descriptor = {
  name: {
    type: 'string',
    required: true,
    validator: (rule, value) => value === 'muji',
  },
  age: {
    type: 'number',
    asyncValidator: (rule, value) => {
      return new Promise((resolve, reject) => {
        if (value < 18) {
          reject('too young');  // reject with error message
        } else {
          resolve();
        }
      });
    },
  },
};
const validator = new Schema(descriptor);
validator.validate({ name: 'muji' }, (errors, fields) => {
  if (errors) {
    // 验证失败，将所有错误返回到一个数组
    return handleErrors(errors, fields);
  }
  // 验证通过
});

// Promise 用法
validator.validate({ name: 'muji', age: 16 }).then(() => {
  // 通过验证并没有错误信息
}).catch(({ errors, fields }) => {
  return handleErrors(errors, fields);
});

接下来我们来介绍一些常用的 API。

1. Rules 是可以执行验证的函数。

import Schema from 'async-validator'
const validator = new Schema(descriptor)
validator.validate({ name: 'Firstname' }, (errors, fields) => {
  if (errors) {
    return handleErrors(errors, fields);
  }
  // validation passed
});

2. Required 是 rule 属性指示要验证的源对象上必须存在的字段。

3. Pattern 是 rule 属性必须匹配才能通过验证的正则表达式。

4. Range 是定义属性的使用范围。对于字符串和数组，根据长度比较；对于数字，则是不能小于 min ，也不能大于 max。

5.Enumerable：要验证的值是使用枚举类型和列车字段的有效枚举属性。

const descriptor = {
  role: { type: 'enum', enum: ['admin', 'user', 'guest'] },
};

6.Messages:  支持 i18n 可以定

message 是 any 类型，支持 jsx：

{ name: { type: 'string', required: true, message: '<b>Name is required</b>' } }

message 也可以是函数，例如，使用 vue-i18n：

 { name: { type: 'string', required: true, message: () => this.$t( 'name is required' ) } }

7.asyncValidator：自定义指定字段的异步校验函数。

const fields = {
  asyncField: {
    asyncValidator(rule, value, callback) {
      ajax({
        url: 'xx',
        value: value,
      }).then(function(data) {
        callback();
      }, function(error) {
        callback(new Error(error));
      });
    },
  },

  promiseField: {
    asyncValidator(rule, value) {
      return ajax({
        url: 'xx',
        value: value,
      });
    },
  },
};

8.validator：指定字段自定义验证函数。

const fields = {
  field: {
    validator(rule, value, callback) {
      return value === 'test';
    },
    message: 'Value is not equal to "test".',
  },

  field2: {
    validator(rule, value, callback) {
      return new Error(`${value} is not equal to 'test'.`);
    },
  },

  arrField: {
    validator(rule, value) {
      return [
        new Error('Message 1'),
        new Error('Message 2'),
      ];
    },
  },
};

更多信息请查看：async-validator。

实践案例，待续......