antd form 的校验，会弹出原生form的校验，怎么去掉原生的校验。

可以通过在 `<Form>` 组件上设置 `noValidate` 属性来禁用原生的表单验证，示例代码如下：

<Form noValidate>
  // 表单项
</Form>

另外，如果你使用了 `getFieldDecorator` 来包装表单项，你还可以通过在 `getFieldDecorator` 的第二个参数中设置 `validateFirst` 属性为 `true` 来实现只使用 antd 的表单验证，代码示例：

<Form>
  <FormItem>
    {getFieldDecorator('username', {
      rules: [
        { required: true, message: '请输入用户名' },
        { min: 2, max: 20, message: '用户名长度为2~20个字符' },
        { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名只能由字母、数字和下划线组成' },
      ],
      validateFirst: true, // 只使用 antd 的表单验证
    })(<Input placeholder="用户名" />)}
  </FormItem>
</Form>

这样设置之后，就不会再弹出原生的表单验证了。

相关问题

antd form 校验

Antd Form 校验可以通过使用 Antd Form 组件的 validateFields 方法来实现。该方法会返回一个 Promise 对象，可以通过 then 方法获取校验结果。以下是一个示例代码：

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

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

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

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

      <Form.Item
        label="Password"
        name="password"
        rules={[{ required: true, message: 'Please input your password!' }]}
      >
        <Input.Password />
      </Form.Item>

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

在上面的示例代码中，我们定义了一个 DemoForm 组件，其中包含了一个 Antd Form 组件。在 Form.Item 中，我们定义了校验规则，比如必填项、最小长度等等。在 onFinish 和 onFinishFailed 方法中，我们可以获取校验结果。

antd form 校验 不是必填 内容不符合规则 会展示红字提醒

antd 的 Form 组件提供了强大的表单验证功能。当你设置某个字段为非必填，但在用户提交表单时输入的内容不符合设定的验证规则（例如，长度、格式等），Form会自动检查并显示错误提示。这个过程通常涉及到 `rules` 属性配置，你可以设置每个字段的验证规则，如：

import { Form, Input, Button } from 'antd';
const { Required } = Form validation;

<Form>
  <Form.Item
    name="input"
    rules={[
      {
        required: false, // 设置为非必填
        message: '此项内容不能为空', // 提示信息
      },
      { type: 'string', min: 5, max: 20, message: '请输入5到20个字符', when: Required, }, // 如果是必填则添加额外的限制
    ]}
  >
    <Input />
  </Form.Item>
  <Button type="primary" htmlType="submit">
    提交
  </Button>
</Form>

当用户填写的内容未满足规则时，输入框旁边会出现红色的星号(*)和错误提示信息。如果是在实际应用中，记得处理`form.validateFields()`或`onSubmit`事件，以便获取详细的错误信息，并根据需要显示给用户。