自定义校验
如果为常规的校验(如是否填写,常规正则校验),可以直接将校验规则提那家在表单生成的config.ts文件中相应字段的rules属性中。如果校验逻辑比较复杂,不想在config.ts文件中写,可以在拆分出的CustomDevForm.vue文件中的schemaMap中添加相应的校验。
computed: {
// 这里需要增加一个计算属性 否则流程关联时字段读写状态会失效
schemaMap() {
const schemaMap = {};
this.getSchemas.forEach((schema) => {
// 在这里修改
schemaMap[schema.key] = schema;
if(schema.children) {
schema.children.forEach(sChild=>{
if(sChild.list){
sChild.list.forEach(lChild=>{
// tab等结构的子元素在这里
schemaMap[lChild.key] = lChild;
});
}
});
}
});
return schemaMap;
}
},
可以使用remote远程校验,也可以使用regex校验函数。不过一般的form表单组件都自带对pattern的正则解析,所以一般不需要使用regex校验函数。具体rules的格式可查看ant-design-vue Form的文档或者APP端uni-app Form的文档。 这里只举一个远程校验的例子:
{
username: [
{
required: true,
message: '请输入用户名',
trigger: 'blur'
},
{
validator: async (rule, value) => {
try {
const { data } = await axios.get('/api/user/check', {
params: { username: value }
});
if (data.exists) {
return Promise.reject('该用户名已被使用');
}
return Promise.resolve();
} catch (error) {
return Promise.reject('验证服务不可用');
}
},
trigger: 'blur'
}
]
}