在ant-design-vue中，提供FormModel表单组件，且支持v-model数据绑定，同时可以校验和提交功能的表单。
一、表单验证
<a-form-modelref="form":rules="rules":model="form"layout="inline":label-col="{span: 10}":wrapper-col="{span: 14}"><a-form-model-itemlabel="密码"prop="password"class="w300"><a-inputv-model="form.password"type="password"/></a-form-model-item>......</a-form-model>
校验规则：
const rules = {username: [{ required: true, message: '该选项必填' }],password: [{ validator: validatePass, tirgger: '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>Nameisrequired</b>'}}
message也可以是函数，例如，使用vue-i18n：
{name:{type:'string',required:true,message:()=>this.$t('nameisrequired')}}
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。
实践案例，待续......
