React ant 设计表单验证不起作用（提交时）

Question

当我按提交时，如果没有填写电子邮件/密码，则应在其下方显示一条消息，说明需要电子邮件/密码，但没有发生

代码沙箱链接： https://codesandbox.io/s/gracious-hypatia-ieepw?file=/src/App.js:0-1221

import './App.css';
import {Button, Form, Input, Checkbox} from 'antd'
import 'antd/dist/antd.css';

function App() {
  return (
    <div className="App">
      
  <Form
      name="basic"
      initialValues={{
        remember: true,
      }}
    >
      <h1 className="Title">Sign Up</h1>
      <h2 className="Text">Enter Email :</h2>
      <Form.Item
        rules={[
          {
            required: true,
            message: 'Please input your email!',
          },
        ]}
      >
        <Input placeholder="Enter Email" />
      </Form.Item>
      <h2 className="Text">Enter Password :</h2>
      <Form.Item
        rules={[
          {
            required: true,
            message: 'Please input your password!',
          },
        ]}
      >
        <Input.Password placeholder="Enter Password" />
      </Form.Item>

      <Form.Item  name="remember" valuePropName="checked">
        <Checkbox>Remember me</Checkbox>
      </Form.Item>

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

export default App;```

Answer 1

您需要为Form.Item组件指定name属性。 antd表单实用程序使用name 。 因此，由于您尚未为文本输入字段定义名称，因此它无法验证或读取其值。 您应该像这样更改您的Form.Item ：

      <Form.Item
        name="email"
        rules={[
          {
            required: true,
            message: 'Please input your email!',
          },
        ]}
      >
        <Input placeholder="Enter Email" />
      </Form.Item>

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

Answer 2

我知道我的回复迟了，但我希望它会帮助别人。 几天前我实际上遇到了同样的问题，但我的问题是我在按钮中有一个被调用的方法，而不是在表单中。 而且您的问题还在于您没有指定名称属性。

因此，首先您必须创建一个方法并在 Form 标记中调用它，然后您必须为每个 Form.Item 组件指定 name 属性。 看起来像这样：

import {Button, Form, Input, Checkbox} from 'antd'
import 'antd/dist/antd.css';

function App() {
const [form] = Form.useForm();
const onFinish = (values) => {
    console.log(form.getFieldsValue());
    console.log('Success:', values);
    form.validateFields();
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <div className="App">
      
  <Form form={form}
      name="basic"
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
    >
      <h1 className="Title">Sign Up</h1>
      <h2 className="Text">Enter Email :</h2>
      <Form.Item
        name="email"
        rules={[
          {
            required: true,
            message: 'Please input your email!',
          },
        ]}
      >
        <Input placeholder="Enter Email" />
      </Form.Item>
      <h2 className="Text">Enter Password :</h2>
      <Form.Item
        name="password"
        rules={[
          {
            required: true,
            message: 'Please input your password!',
          },
        ]}
      >
        <Input.Password placeholder="Enter Password" />
      </Form.Item>

      <Form.Item  name="remember" valuePropName="checked">
        <Checkbox>Remember me</Checkbox>
      </Form.Item>

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

export default App;````