在 ant.design 的表单组件中,可以使用标准规则 API 来显示警告。下面是一个示例代码,演示了如何在表单中使用标准规则 API 来显示警告信息:
首先,需要安装 antd
和 @ant-design/icons
依赖:
npm install antd @ant-design/icons --save
然后,可以使用以下代码来创建一个带有警告信息的表单:
import React from 'react';
import { Form, Input, Button } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
const DemoForm = () => {
const onFinish = (values) => {
console.log('Received values:', values);
};
const validateNumber = (_, value) => {
if (value && isNaN(Number(value))) {
return Promise.reject(new Error('请输入数字'));
}
return Promise.resolve();
};
return (
);
};
export default DemoForm;
在上面的代码中,我们首先导入了 Form
、Input
和 Button
组件,以及警告图标 ExclamationCircleOutlined
。然后,我们创建了一个函数组件 DemoForm
,其中定义了一个 onFinish
方法,用于处理表单提交事件。
在表单项的 rules
中,我们定义了两个规则。第一个规则要求该字段是必填的,如果没有输入,则会显示错误信息 "请输入数字"。第二个规则使用自定义的验证函数 validateNumber
来验证输入是否为数字,如果不是数字,则会显示错误信息 "请输入数字"。
最后,我们将 Form.Item
包裹在 Form
组件中,并设置了 onFinish
回调函数。在表单中,我们使用了 Input
组件来输入数字,并使用了 Button
组件来提交表单。
这样,当用户输入非数字时,表单项会显示警告信息,并且在提交表单时会进行验证。