如何使用AntDesign的Form.Item組件的validateStatus屬性

AntDesign的Form.Item組件的validateStatus屬性用于設(shè)置表單項(xiàng)驗(yàn)證狀態(tài)的樣式，常用的取值有’success’、‘warning’、‘error’和’validating’，分別表示驗(yàn)證通過(guò)、警告、錯(cuò)誤和驗(yàn)證中。以下是使用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;

在上面的示例中，我們分別為用戶名和密碼輸入框設(shè)置了不同的驗(yàn)證狀態(tài)。用戶名輸入框的validateStatus屬性設(shè)置為’success’，表示驗(yàn)證通過(guò)；密碼輸入框的validateStatus屬性設(shè)置為’error’，表示驗(yàn)證出錯(cuò)，并且通過(guò)help屬性設(shè)置了錯(cuò)誤提示信息。通過(guò)設(shè)置validateStatus屬性，可以直觀地展示表單項(xiàng)的驗(yàn)證狀態(tài)，提高用戶體驗(yàn)。