在Ant Design中,可以使用Form组件结合自定义校验规则来实现表单验证必填字段。下面是一个简单的示例代码:
import React from 'react';
import { Form, Input, Button } from 'antd';
const DemoForm = () => {
// 表单提交时触发的回调函数
const onFinish = (values) => {
console.log('Received values of form: ', values);
};
// 自定义校验规则
const validateRequiredField = (_, value) => {
if (!value) {
return Promise.reject(new Error('此字段为必填项'));
}
return Promise.resolve();
};
return (
);
};
export default DemoForm;
在上述示例中,我们使用Form.Item来包裹Input组件,通过设置rules属性来添加校验规则,其中validator属性指定了自定义校验函数validateRequiredField。当字段为空时,校验函数会返回一个rejected状态的Promise,显示错误消息。
注意,示例中的Form.Item中的name属性对应了onFinish回调函数中的values对象的属性名,因此在提交表单时可以通过values.name和values.email来获取表单字段的值。
以上示例代码可以在Ant Design的Form文档中找到更多详细的说明和示例:https://ant.design/components/form/
上一篇:Ant Design 表单问题