5.Form表单验证实现【登陆】/ 登陆代码优化实现跳转home页
1.这里使用Form表单的声明式验证与自定义验证
<Form.Item name="username" // 声明式验证，直接使用别人定义好的验证规则进行验证 rules={[{ required: 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={[{ validator: validatePwd }]} > <Input prefix={<LockOutlined className="site-form-item-icon" />} type="password" placeholder="密码" /> </Form.Item> /* 对密码进行自定义验证 */ const validatePwd = (rule, value, callback) => { console.log('validatePwd()', rule, value) if(!value){ callback('密码必须输入') }else if(value.length < 4){ callback('密码长度不能小于4位') }else if(value.length > 12){ callback('密码长度不能大于12位') }else if(!/^[a-zA-Z0-9_]+$/.test(value)){ callback('密码必须由英文、数字或下划线组成') }else{ callback() // 验证通过 } // callback('xxxxx') // 验证失败，并指定提示的文本 }
2.统一验证后，验证通过后再发送ajax请求
const onFinish = (values) => { // 统一验证成功 console.log("validate success ", values) }; const onFinishFailed = (errorInfo) => { // 统一验证失败 console.log("validate failed error info ", errorInfo) } <Form name="normal_login" className="login-form" initialValues={{ remember: true }} onFinish={onFinish} onFinishFailed={onFinishFailed} >
3. 登陆js代码优化且实现路由跳转如下：
import { Button, Form, Input, message } from 'antd';
import { useNavigate } from "react-router-dom”
// 默认暴露不需要写大括号，分别暴露需要解构，即大括号
import {reqLogin} from '../../api’
const navigate = useNavigate()
const onFinish = async (values) => {
// 统一验证成功
console.log("validate success ", values)
// 请求登陆
const {username, password} = values
// 原始的写法
// reqLogin(username, password).then(response => {
// console.log("登陆成功了!", response.data)
// }).catch(error => {
// console.log("登陆失败了!", error)
// })
// async 与 await 简化 promise的使用，即取代了 .then .catch， 实际就是为了同步 如下：
const response = await reqLogin(username, password)
console.log("请求成功了!", response.data)
const res = response.data
if (res.code === 1){
// 提示登陆成功
message.success(res.message)
// 跳转至管理界面
navigate('/home')
}else{
// 登陆失败
message.error(res.message)
}
};
const onFinishFailed = (errorInfo) => {
console.log("参数检验失败了!")
// 统一验证失败
console.log("validate failed error info ", errorInfo)
}
4.登陆的login.jsx文件内容如下【使用的是函数式组件】：
/* 登陆的一级路由组件 */ import React from 'react' import { LockOutlined, UserOutlined } from '@ant-design/icons'; import { Button, Form, Input, message } from 'antd'; import { useNavigate } from "react-router-dom" import './login.css' import logo from '../../assets/logo.png' // 默认暴露不需要写大括号，分别暴露需要解构，即大括号 import {reqLogin} from '../../api' import memoryUtils from "../../utils/memoryUtils" import storageUtils from "../../utils/storageUtils" function Login(){ const navigate = useNavigate() // 先判断是否登陆，登陆直接跳转至 管理界面，为了有些用户直接在地址栏修改路径 const user = memoryUtils.user if(user.username){ // 这里的问题有待解决 即登陆成功后，在来到登陆页面是无法正常显示登陆，目的时调转至管理页面才可以 navigate('/admin') return } // 点击登陆 const onFinish = async (values) => { // 统一验证成功 console.log("validate success ", values) // 请求登陆 const {username, password} = values // async 与 await 简化 promise的使用，即取代了 .then .catch， 实际就是为了同步 如下： // ajax 优化2 直接返回的是 response.data const res = await reqLogin(username, password) console.log("请求成功了!", res) // const res = response.data if (res.code === 1){ // 提示登陆成功 message.success(res.message) // 跳转之前先保存user到内存 memoryUtils.user = res.data // 保存user到local即本地 storageUtils.saveUser(res.data) // 跳转至管理界面 navigate('/admin') }else{ // 登陆失败 message.error(res.message) } }; const onFinishFailed = (errorInfo) => { console.log("参数检验失败了!") // 统一验证失败 console.log("validate failed error info ", errorInfo) } /* 对密码进行自定义验证 */ const validatePwd = (rule, value, callback) => { console.log('validatePwd()', rule, value) if(!value){ callback('密码必须输入') }else if(value.length < 4){ callback('密码长度不能小于4位') }else if(value.length > 12){ callback('密码长度不能大于12位') }else if(!/^[a-zA-Z0-9_]+$/.test(value)){ callback('密码必须由英文、数字或下划线组成') }else{ callback() // 验证通过 } } return ( <div className="login"> <header className="login-header"> <img src={logo} alt="logo"/> <h1>多-后台系统</h1> </header> <section className="login-content"> <h2>用户登陆</h2> <Form name="normal_login" className="login-form" initialValues={{ remember: true }} onFinish={onFinish} onFinishFailed={onFinishFailed} > <Form.Item name="username" // 声明式验证，直接使用别人定义好的验证规则进行验证 rules={[{ required: 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={[{ validator: validatePwd }]} > <Input prefix={<LockOutlined className="site-form-item-icon" />} type="password" placeholder="密码" /> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit" className="login-form-button"> 登陆 </Button> </Form.Item> </Form> </section> </div> ) } export default Login
整个项目已经开发完成,包括前后台,需要源码的可以联系: 微信号:guos_123 [添加请注明来意]
