在使用antd开发web端时经常用到表单校验,但有时antd提供的校验规则不能满足我们的需求,这是就用到了,antd中form的
自定义检验方式进行我们的校验:
eg:
<Form.Item
key="code"
label="动作代码"
{...MODAL_FORM_ITEM_LAYOUT}
>
{form.getFieldDecorator('code', {
initialValue: isEdit ? editRecord.code : undefined,
rules: [
{
required: true,
message: "动作代码不能为空",
}),
},
{
validator: this.checkActionCode, // 自定义检验函数
},
],
})(<Input trim inputChinese={false} />)}
</Form.Item>
/**
* 校验动作代码唯一性
*/
@Bind()
checkActionCode = (rule, value, callback) => {
console.log(this.props.actionCode);
if (!CODE) { // 正则验证
callback('该动作代码已存在'); // 校验未通过
}
callback(); // 校验通过
}
}
小伙伴们感觉有帮助的话希望点个赞哟,如果有问题或疑问欢迎大家评论区留言,看到后第一时间回复。