React知乎日报项目(三)

前置操作:
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.less:

.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设置校验规则,然后:
方案一: 手动校验~对当前所有表单中的某一项做校验

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

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

  1. 我们的按钮,原生的type类型必须是submit「antd基于nativeType设置;antd-mobile中基于type属性设置」
  2. 按钮必须包含在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设置校验规则
  1. 内置的校验规则 Rule【针对校验规则不太复杂的情况】
  2. 自定义校验规则 手机号:/^(?:(?:\+|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 }]}><
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值