如果未更改默认值，则antd表单项验证失败

Ant Design（简称antd）是一个流行的React UI组件库，它提供了丰富的表单组件和验证功能。当使用antd的表单项时，如果验证失败，通常是因为表单字段的值不符合预设的验证规则。

基础概念

表单验证：表单验证是指在用户提交表单之前，检查表单中的数据是否满足特定的条件或规则。如果不满足，系统会给出错误提示。

类型

必填验证：检查字段是否为空。
格式验证：如电子邮件、电话号码、日期等的格式检查。
长度验证：字符串或数组的最小和最大长度限制。
自定义验证：开发者可以根据需求编写自己的验证逻辑。

应用场景

注册页面：验证用户名、密码、电子邮件等。
搜索功能：确保搜索关键词符合要求。
数据录入表单：如库存管理、订单处理等。

遇到验证失败的原因

默认值不符合规则：如果表单项设置了默认值，而这个默认值不满足验证规则，那么表单项一开始就会显示验证失败。
用户输入错误：用户输入的数据不符合验证规则。
规则设置错误：验证规则本身可能存在问题，导致误判。

解决方法

示例代码

假设我们有一个简单的表单，包含一个必填的用户名字段和一个电子邮件字段，电子邮件字段需要进行格式验证。

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

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

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

      <Form.Item
        label="Email"
        name="email"
        rules={[
          { required: true, message: 'Please input your email!' },
          { type: 'email', message: 'The input is not a valid email!' },
        ]}
      >
        <Input />
      </Form.Item>

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

export default MyForm;