React知乎日报项目（三）

留奇

已于 2023-10-23 15:41:35 修改

阅读量66

点赞数

分类专栏： React从入门到中级文章标签： react.js

于 2023-06-07 23:25:11 首次发布

本文链接：https://blog.csdn.net/lqiqil/article/details/130875276

版权

前置操作：
NavBarAgain.jsx：

import React from "react";
import {
    NavBar } from "antd-mobile";
import PropTypes from 'prop-types'
import './NavBarAgain.less'

const NavBarAgain = function NavBarAgain(props) {
   
    let {
    title } = props
    const handleBack = () => {
   
        // 复杂返回逻辑...
    }
    return <NavBar className="navbar-again-box" onBack={
   handleBack}>
        {
   title}
    </NavBar>
}
NavBarAgain.defaultProps = {
   
    title: '个人中心' // 给当前函数添加一个静态私有属性defaultProps，设置默认值
}
NavBarAgain.propTypes = {
   
    title: PropTypes.string
}
export default NavBarAgain

NavBarAgain.less：

.navbar-again-box {
   
    padding: 0 20px;
    height: 80px;

    .adm-nav-bar-title {
   
        font-size: 30px;
    }

    .adm-nav-bar-back-arrow {
   
        font-size: 36px;
    }
}

.login-box {
   
    .adm-form {
   
        padding: 30px;
    }

    .adm-form-footer {
   
        .adm-button {
   
            display: block;
            margin: 0 auto;
            width: 60%;
            height: 70px;
            font-size: 28px;
            border-radius: 0;
        }
    }

    .adm-form-item {
   
        font-size: 28px;
    }

    .adm-list-item-content-extra {
   
        .adm-button {
   
            width: 160px;
            font-size: 24px;
            border-radius: 0;
        }
    }
}

登录页-表单校验处理

我们想做UI组件库中Form表单的校验

首先在Form.Item中基于rules设置校验规则，然后：
方案一： 手动校验~对当前所有表单中的某一项做校验

基于ref或者Form.useForm()获取Form的实例「或者是这个组件暴露的方法」
自己基于JS执行相关的方法，实现校验：resetFields、validateFields…

方案二： 触发Form的自动校验机制

我们的按钮，原生的type类型必须是submit「antd基于nativeType设置；antd-mobile中基于type属性设置」
按钮必须包含在Form中「这样点击按钮，会自动触发Form的表单校验，成功：onFinish 失败：onFinishFailed」

const Login = function Login() {
   
    /* 状态 */
    const [formIns] = Form.useForm()// 手动校验1
    /* 发送验证码 */
    const send = async () => {
   
        try {
   
            await formIns.validateFields(['phone'])// 手动校验4
            // 能往下执行说明手机号格式校验通过
        } catch (_) {
    }
    }
    /* 表单提交 */
    const submit = (values) => {
   // 自动校验3
        // 能往下执行说明表单校验已经成功了 values:Form自动收集的每个表单中的信息
        console.log(values)
    }
    return <div className="login-box">
        ...
        <Form
            layout='horizontal'
            style={
   {
    "--border-top": 'none' }}
            footer={
    <Button type='submit' color='primary'>提交</Button>// 自动校验1 }
            onFinish={
   submit}// 自动校验2
            form={
   formIns}// 手动校验2
            initialValues={
   {
    phone: '', code: '' }}
        >
            <Form.Item name="code" label='验证码' extra={
   <Button size="small" color="primary" onClick={
   send}>发送验证码</Button>}>// 手动校验3
                <Input />
            </Form.Item>
        </Form>
    </div>
}

我们在Form.Item中基于rules设置校验规则

内置的校验规则 Rule【针对校验规则不太复杂的情况】
自定义校验规则手机号:/^(?:(?:\+|00)86)?1\d{10}$/【针对校验规则特别复杂的情况】
vscode：any-rule插件快速查询常见正则表达式

const Login = function Login() {
   
	...
	/* 发送验证码 */
    const send = async () => {
   
        try {
   
            await formIns.validateFields(['phone'])
            Toast.show({
   
                icon: 'success',
                content: '手机号校验成功'
            })
        } catch (_) {
    }
    }
    /* 自定义表单校验规则 */
    const validate = {
   
        phone(_, value) {
   
            value = value.trim()
            let reg = /^(?:(?:\+|00)86)?1\d{10}$/
            if (value.length === 0) return Promise.reject(new Error('手机号是必填项'))
            if (!reg.test(value)) return Promise.reject(new Error('手机号格式有误'))
            return Promise.resolve()
        },
        code(_, value) {
   
            value = value.trim()
            let reg = /^\d{6}$/
            if (value.length === 0) return Promise.reject('验证码是必填项')
            if (!reg.test(value)) return Promise.reject('验证码格式有误')
            return Promise.resolve()
        }
    }
    return <div className="login-box">
        ...
        <Form
            ...
            requiredMarkStyle={
   false}
        >
        	// 自定义校验规则
            <Form.Item name='phone' label='手机号' rules={
   [{
    validator: validate.phone }]}><