React form validation ——-formik+yup

Vue element- UI vant- UI vue vee-validate component library pure native Input formik

import React, { useState } from 'react'
// import Icon from '@/components/Icon'
import styles from './index.module.scss'
import NavBar from '@/components/NavBar'
import Input from '@/components/Input'
import { useFormik } from 'formik'
// Form validation package
import * as Yup from 'yup'
import classNames from 'classnames'
import { useDispatch } from 'react-redux'
import { sendCode, login } from '@/store/action/login'
import { Toast } from 'antd-mobile'
import { useHistory } from 'react-router'
export default function Login() {
  const history = useHistory()
  const dispatch = useDispatch()
  // After sending the verification code, count down and click the button
  const [time, setTime] = useState(0)
  // Click send captcha request
  const onExtraClick = async() = > {if (time > 0) return
    if (!/^1[3-9]\d{9}$/.test(mobile)) {
      formik.setTouched({
        mobile: true,})return
    }
    await dispatch(sendCode(mobile))
    Toast.success('Verification code obtained successfully'.1)
    // Start the countdown
    setTime(60)

    let timeId = setInterval(() = > {
      setTime((time) = > {
        if (time === 1) {
          clearInterval(timeId)
        }
        return time - 1})},1000)}const formik = useFormik({
    initialValues: {
      mobile: ' '.code: ' ',},// Triggered when the form is submitted
    async onSubmit(values) {
      await dispatch(login(values))
      Toast.success('Successful landing')
      history.push('/home')},validationSchema: Yup.object({
      mobile: Yup.string()
        .required('Mobile phone number cannot be empty')
        .matches(/^1[3-9]\d{9}$/.'Mobile phone number format error'),
      code: Yup.string()
        .required('Captcha cannot be null')
        .matches(/^\d{6}$/.'Mobile phone number format error'),}),// Native writing is cumbersome
    // validate(values) {
    // const errors = {}
    // if (! values.mobile) {
    // errors.mobile = 'Mobile number cannot be empty'
    / /}
    // if (! values.code) {
    // errors.code = 'Verification code cannot be null'
    / /}
    // return errors
    // },
  })
  const {
    values: { mobile, code },
    handleChange,
    handleSubmit,
    handleBlur,
    touched,
    errors,
    isValid,
  } = formik
  return (
    <div className={styles.root}>
      <NavBar>The login</NavBar>
      <div className="content">The title * /} {/ *<h3>Text login</h3>
        <form onSubmit={handleSubmit}>{/* Mobile phone number input box */}<div className="input-item">
            <Input
              maxLength={11}
              className="input"
              name="mobile"
              placeholder="Please enter your mobile phone number."
              onChange={handleChange}
              onBlur={handleBlur}
              value={mobile}
              autoComplete="off"
            />
            {touched.mobile && errors.mobile ? (
              <div className="validate">{errors.mobile}</div>
            ) : null}
          </div>{/* SMS verification code input box */}<div className="input-item">
            <Input
              placeholder="Please enter the verification code."
              extra={time= = =0? 'Get captcha': time + 'sAfter obtaining '}maxLength={6}
              onExtraClick={onExtraClick}
              onChange={handleChange}
              name="code"
              value={code}
              onBlur={handleBlur}
              autoComplete="off"
            ></Input>
            {touched.code && errors.code ? (
              <div className="validate">{errors.code}</div>
            ) : null}
          </div>{/* Login button */}<button
            type="submit"
            className={classNames('login-btn'{disabled: !isValid })}
            disabled={! isValid}
          >The login</button>
        </form>
      </div>
    </div>)}Copy the code