介绍
自定义字段组件的时候，我们可能会遇到有复杂校验规则或者业务上特殊的校验提示信息的场景，这时候可以通过覆写字段的校验方法validator来实现。
示例代码
import { SPI, ValidatorInfo, FormStringFieldWidget, isEmptyValue, isValidatorSuccess, FormFieldWidget, ViewType, ModelFieldType } from '@kunlun/dependencies'
@SPI.ClassFactory(FormFieldWidget.Token({
viewType: [ViewType.Form],
ttype: ModelFieldType.String,
widget: 'DemoPhone'
}))
export class DemoFormPhoneFieldWidget extends FormStringFieldWidget {
// 字段校验方法
public async validator(): Promise<ValidatorInfo> {
// 建议先调用平台内置的通用校验逻辑
const res = await super.validator();
if (!isValidatorSuccess(res)) {
// 校验失败直接返回
return res;
}
// 编写自有校验逻辑
if (!isEmptyValue(this.value) && !/^1[3456789]\d{9}$/.test(this.value as string)) {
// 通过内置的validatorError方法提示校验提示信息
return this.validatorError('手机号格式错误');
}
// 无异常，用内置的validatorSuccess返回校验通过的信息
return this.validatorSuccess();
}
}扩展学习
自定义字段组件如何处理vue组件内的表单校验
Oinone社区 作者：nation原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/16347.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
