[React]antd表單校驗函式寫法

來自文心一言

透過 rules 屬性來定義校驗規則，其中可以包含自定義的校驗函式 validator

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

const MyForm = () => {
  const [form] = Form.useForm();

  // 自定義校驗函式
  const checkUsername = (_, value) => {
    if (!value) {
      return Promise.reject(new Error('使用者名稱不能為空'));
    }
    if (value.length < 3) {
      return Promise.reject(new Error('使用者名稱長度不能少於3個字元'));
    }
    return Promise.resolve();
  };

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

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Form
      form={form}
      name="basic"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label="使用者名稱"
        name="username"
        rules={[
          { required: true, message: '請輸入使用者名稱!' },
          { validator: checkUsername }  // 使用自定義校驗函式
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        <Button type="primary" htmlType="submit">
          提交
        </Button>
      </Form.Item>
    </Form>
  );
};

export default MyForm;