如何使用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屬性，可以直觀地展示表單項的驗證狀態，提高用戶體驗。