// 自定义校验函数
// rule:当前被校验对象
// value: 用户输入的值
const check = async (rule, value, callback) => {
if (!value) return;
if (判断条件) {
// 失败时执行
return Promise.reject('内容不合规范...(校验提示)');
} else {
// 成功时执行
return Promise.resolve(); //成功
}
};
// 规则
const rules = {
// 默认校验
name: [{
required: true,
message: '请输入名称',
trigger: 'blur'
}],
// 自定义校验第一种方法
phone: [
{
required: true,
message: '请输入电话号码',
},
{
pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
message: '电话号码格式不正确',
trigger: 'blur',
}],
// 自定义校验第二种方法
content: [
{
required: true,
message: "请输入内容"
},
{
validator: (rule, value, callback) => check(rule, value, callback),
trigger: ["blur"]
}
]
};
Ant Design Vue的表单校验(默认校验、自定义校验)
于 2022-04-12 17:26:37 首次发布