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, 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>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。
实践案例,待续......
更多推荐
所有评论(0)