React——form的校验和验证规则（使用formik,yup）

React——form的校验和验证规则（使用formik,yup）

React在进行form校验时，有两种方案

1. 使用组件库进行from表单校验,但是React中组件库用起来比较费力。
2. 使用原生方法写，这里借助  formik 和  yup进行使用

 一，formik的使用

官方文档

1. 首先进行安装依赖 

yarn add  formik

    2.使用

•  先导入

import { useFormik } from 'formik';

• 进行初始化 

initialValues：初始化 输入框的密码和账号 

onSubmit：当点击提交按钮时，调用这个钩子，拿到输入框的vaule值

 这里打印一下 formik可以看到有很多钩子函数可以使用

 const formik = useFormik({initialValues: {mobile: '',code: ''},validate,onSubmit: values => {// 拿到输入框的值console.log(values);},});console.log(formik);

•  在from表单中绑定这些钩子函数，会自动调用和受控

•   formik中提供了校验规则，但是还是要自己手写，这里了解一下

 进行校验结果的控制

•     这里看看全部代码

import React from 'react'
import NavBar from '../NavBar/NavBar'
import style from './dule.scss'
import Input from '../Input/input.js'
// 导入表单验证的formik
import { useFormik } from 'formik';
//导入校验验证规则yup
//import * as yup from 'yup';
const validate = values => {const error = {}if (!bile) {bile = '手机号不能为空'}if (!de) {de = '验证码不能为空'}return error
}
export default function Login() {const formik = useFormik({initialValues: {mobile: '',code: ''},validate,onSubmit: values => {// 拿到输入框的值console.log(values);},});console.log(formik);return (<div className={}><NavBar>登录</NavBar><div className='content'><h3>短信登录</h3><form onSubmit={formik.handleSubmit}><div className='input-item'><Inputname='mobile'placeholder='请输入手机号'value={bile}onChange={formik.handleChange}onBlur={formik.handleBlur}/>{bile && bile ? < div className='validate'>{bile}</div> : null}<div className='input-item'><Inputplaceholder='请输入验证码'extra='获取验证码'name='code'onChange={formik.handleChange}onBlur={formik.handleBlur}value={de} />{de && scode ? <div className='validate'>{de}</div> : null}</div><button type='submit' className='login-btn'>登录</button></div></form></div ></div >)
}

二，yup

上面的校验规则看起来不是很方便，使用yup会方便很多,可以去官网看看，非常简单。相信都可以看明白

yup: