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