import React from "react"; import { Button, Checkbox, Form, Input } from "antd"; import { Link, useNavigate } from "react-router-dom"; import "./less/Login.less"; import logoImg from "../assets/logo.png"; import { UserOutlined, LockOutlined } from "@ant-design/icons"; export default function Login() { const onFinish = (values) => { console.log("Success:", values); }; const onFinishFailed = (errorInfo) => { console.log("Failed:", errorInfo); }; return ( <div className="login"> <div className="login_box"> <img src={logoImg} alt="" /> <Form name="basic" labelCol={{ span: 8, }} wrapperCol={{ span: 16, }} initialValues={{ remember: true, }} onFinish={onFinish} onFinishFailed={onFinishFailed} autoComplete="off" > <Form.Item // label="Username" name="username" rules={[ { required: true, message: "Please input your username!", }, ]} > <Input size="large" prefix={<UserOutlined />} placeholder="请输入用户名" /> </Form.Item> <Form.Item // label="Password" name="password" rules={[ { required: true, message: "Please input your password!", }, ]} > <Input.Password size="large" prefix={<LockOutlined />} placeholder="请输入密码" /> </Form.Item> <Form.Item name="confirm" dependencies={["password"]} hasFeedback rules={[ { required: true, message: "请再次确认密码!", }, ({ getFieldValue }) => ({ validator(_, value) { if (!value || getFieldValue("password") === value) { return Promise.resolve(); } return Promise.reject(new Error("请输入相同密码!")); }, }), ]} > <Input.Password size="large" prefix={<LockOutlined />} placeholder="请再次确认密码" /> </Form.Item> <Form.Item> <Button size="large" type="primary" htmlType="submit" block> 注册 </Button> </Form.Item> </Form> </div> </div> ); }
总结
