如何使用AntDesign的Form.Item组件的validateStatus属性

AntDesign的Form.Item组件的validateStatus属性用于设置表单项验证状态的样式，常用的取值有’success’、‘warning’、‘error’和’validating’，分别表示验证通过、警告、错误和验证中。以下是使用validateStatus属性的示例代码：

import { Form, Input, Button } from 'antd';

const MyForm = () => {
  const onFinish = (values) => {
    console.log('Received values:', values);
  };

  return (
    <Form
      name="basic"
      initialValues={{ remember: true }}
      onFinish={onFinish}
    >
      <Form.Item
        label="Username"
        name="username"
        rules={[{ required: true, message: 'Please input your username!' }]}
        validateStatus="success"
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Password"
        name="password"
        rules={[{ required: true, message: 'Please input your password!' }]}
        validateStatus="error"
        help="Password is required"
      >
        <Input.Password />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default MyForm;

在上面的示例中，我们分别为用户名和密码输入框设置了不同的验证状态。用户名输入框的validateStatus属性设置为’success’，表示验证通过；密码输入框的validateStatus属性设置为’error’，表示验证出错，并且通过help属性设置了错误提示信息。通过设置validateStatus属性，可以直观地展示表单项的验证状态，提高用户体验。