antd4 form表单

import React, {Component} from "react"; import { Form, Input, Button, Checkbox } from 'antd'; import {message} from "antd"; import { UserOutlined, LockOutlined } from '@ant-design/icons'; import './login.css'; import {reqLogin} from '../../api' import {reqUser} from '../../api' import axios from "axios"; class Login extends Component{ render() { return( <div className="login"> } } const NormalLoginForm = () => { const onFinish = values => { //提交表单且数据验证成功后回调事件 console.log('Received values of form: ', values); return ( <Form name="normal_login" className="login-form" initialValues={{ remember: true, }} onFinish={onFinish} > <Form.Item name="name" rules={[// 声明式验证: 直接使用别人定义好的验证规则进行验证 { required: true, whitespace: true, message: '用户名不能为空！' }, // { min: 4, message: '用户名至少4位' }, // { max: 12, message: '用户名最多12位' }, // { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名必须是英文、数字或下划线组成' }, ]} > <Input prefix={<UserOutlined className="site-form-item-icon"/>} placeholder="用户名"/> </Form.Item> <Form.Item name="password" rules={[ { required: true, message: '密码不能为空！', }, ]} > <Input prefix={<LockOutlined className="site-form-item-icon"/>} type="password" placeholder="密码" /> </Form.Item> <Form.Item> <Form.Item name="remember" valuePropName="checked" noStyle> <Checkbox>记住我</Checkbox> </Form.Item> <a className="login-form-forgot" href=""> 忘记密码 </a> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit" className="submitBtn"> 登录 </Button> <a href="">没有账号？立即注册</a> </Form.Item> </Form> ); } export default Login;