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
标签：console,log,res,callback,代码优化,登陆,跳转,const From： https://www.cnblogs.com/guo-s/p/17165485.html