React antd—current.validateFields实现登录表单校验

import React from 'react'
import { Card, Form, Input, Button, message, Checkbox } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons';

export default function FormLogin(props) {
  //获取表单节点
  const formRef = React.createRef()
  //校验
  const onCheck = async () => {
    try {
      const values = await formRef.current.validateFields();
      console.log('Success:', values);
      message.success(`恭喜你，${values.username},提交校验成功,密码为${values.password}`)
    } catch (errorInfo) {
      console.log('Failed:', errorInfo);
      message.warn('提交校验失败')
    }
  }

  return (
    <div style={{ width: "100%" }}>
      <Card title="登录行内表单">
        {/* layout="inline" ———— 全在一行 */}
        <Form layout="inline">
          <Form.Item>
            <Input placeholder="请输入用户名" />
          </Form.Item>
          <Form.Item>
            <Input placeholder="请输入密码" />
          </Form.Item>
          <Form.Item>
            <Button type="primary">登录</Button>
          </Form.Item>
        </Form>
      </Card>

      <Card title="登录垂直表单" style={{ marginTop: "10px" }}>
        {/* 绑定表单节点 */}
        <Form style={{ width: 300 }}
          ref={formRef}>
          <Form.Item
            name="username"
            initialValue=""
            rules={[
              {
                required: true,
                message: 'Please input your Username!',
              },
              {
                min: 5, max: 10,
                message: '长度不在范围内'
              },
              {
                pattern: new RegExp('^\\w+$', 'g'),
                message: '用户名必须为字母或者数字'
              }
            ]}>
            <Input
              prefix={<UserOutlined />}
              placeholder="请输入用户名" />
          </Form.Item>
          <Form.Item
            name="password"
            initialValue=""
            rules={[
              {
                required: true,
                message: 'Please input your Password!',
              },
            ]}>
            <Input
              prefix={<LockOutlined />}
              type="password"
              placeholder="请输入密码" />
          </Form.Item>
          <Form.Item
            name="remember"
            valuePropName="checked"
          >
            <Checkbox >
              记住密码
            </Checkbox>
            <a href="http://baidu.com" style={{ float: "right" }}>忘记密码</a>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit"
              onClick={onCheck}>
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}