antd的input输入框输入内容校验

Ant Design (antd) 是一套基于 React 的开源 UI 组件库，它提供了一个名为 `Input` 的组件，用于创建各种类型的表单输入字段，包括文本、密码、数字等。对于输入内容的校验，antd 提供了内置的 `Form` 组件配合 `ValidationRules` 来处理。

在 `Form` 中，你可以使用 `rules` 属性来配置每个输入框的验证规则。例如：

import { Form, Input, Button } from 'antd';
import { required } from 'antd/lib/form/validation';

const { TextArea } = Input;

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

<Form
  name="basic"
  onFinish={onFinish}
>
  <Form.Item
    label="姓名"
    name="name"
    rules={[required('Name is required!')]}
  >
    <Input />
  </Form.Item>
  <Form.Item
    label="邮箱"
    name="email"
    rules={[
      { type: 'email', message: 'Please enter a valid email address!' },
      required('Email is required!'),
    ]}
  >
    <Input />
  </Form.Item>
  <Form.Item
    hasFeedback
    rules={[required('Comment is required!')]}
  >
    <TextArea placeholder="You can describe your idea here." />
  </Form.Item>
  <Button type="primary" htmlType="submit">
    Submit
  </Button>
</Form>

在这个例子中，`required` 是一个内置规则，表示必填项；`type: 'email'` 则用于检查电子邮件格式。如果用户输入不符合规则，当他们尝试提交表单时，antd 会显示相应的错误提示。