formik

formik

使用formik和yup是为了解决react-form表单验证的繁琐

不使用插件，form表单验证

• 利用onChange事件触发写的表单规则
• 再分别对不同type书写规则验证逻辑
• 为表单定义state

// 关键代码逻辑
//组件触发区
<TextFieldid="ResetEmail"type="email" label="E-mail"onChange={this.handleInputChange} value={ResetEmail}error={resetPasswordError}
/>//onchange触发事件handleInputChange = (value,field) =>{this.setState({[field]: value},()=>{setTimeout(()=>{if(field === 'Email'){this.checkInputEmail(value);}if(field === 'Password'){this.checkInputPassword(value);}if(field === 'ResetEmail'){this.checkResetPasswordEmail(value)}},600);});}// email 格式验证checkInputEmail(email){let errorMsg = '';let bool = false;if(email === undefined || email === ''){errorMsg = this.state.isLoginPage ? 'Email is required' : 'Please enter a valid email';}if(errorMsg === ''){let reg = /w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*/;bool = st(email);errorMsg = bool ? '' : 'Invalid email';}this.setState({ emailError: errorMsg });return bool;}

• 可以看出逻辑繁琐需要我们单独设立state，规则书写麻烦，随着需要书写的type增加代码量也大。

使用formik-yup书写验证规范

首先我们先简单了解一下formik与yup

1. formik原理：内置了表单的state管理操作，无需单独为表单建立state，且使用了Context，能够让表单组件多层嵌套，不再需要在一层一层传递。
2. Yup 是一个用于运行时值解析和验证的模式构建器，定义模式、转换值以匹配、断言等。

formik–prop-api链接:
yup-github链接:

例子讲解

// 引入所需
// useFormik()是一个自定义的 React 钩子
// 官网使用例子： { useFormik } from 'formik';
import * as yup from 'yup';// 定义所需要的formik-prop-api。可自查官网了解
/* 
initialValues：初始化要的数据
onSubmit: 获得表单各个字段，自定义自己的业务操作
validationSchema: 结合yup的验证模式
*/
const {values,errors,touched,handleBlur,handleChange,handleSubmit} = useFormik({initialValues,onSubmit: handleFormSubmit,validationSchema: formSchema});// 初始话表单数据
const initialValues = {email: '',
};// yup规则,可以查yup-github链接看相关api使用。
const formSchema = yup.object().shape({// name: yup.string().required('${path} is required'),email: yup.string().email('invalid email').required('${path} is required'),
});/* 
注意 '${path} is required'
使用字符串语法，而非es2015引进的模板字符串，
因为后者会在编译期就去链接对应的变量，但是 path
并非是预先定义的变量，所以为报错。
所以这里只是普通的字符串里使用了类似模板字符串的语法罢了。
*/// 组件使用<BazarTextField mb={1.5} name="email" label="Email" placeholder="exmple@mail" variant="outlined" size="small" type="email" fullWidth onBlur={handleBlur} onChange={handleChange} value={ail || ''} error={!!ail && !!ail} helperText={ail && ail} />