使用formik和yup是为了解决react-form表单验证的繁琐
不使用插件，form表单验证
- 利用onChange事件触发写的表单规则
- 再分别对不同type书写规则验证逻辑
- 【formik-yup书写React表单验证】为表单定义state
// 关键代码逻辑
//组件触发区
//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 = reg.test(email);
errorMsg = bool ? '' : 'Invalid email';
}
this.setState({ emailError: errorMsg });
return bool;
}
- 可以看出逻辑繁琐需要我们单独设立state，规则书写麻烦，随着需要书写的type增加代码量也大。
使用formik-yup书写验证规范
首先我们先简单了解一下formik与yup
- formik原理：内置了表单的state管理操作，无需单独为表单建立state，且使用了Context，能够让表单组件多层嵌套，不再需要在一层一层传递。
- Yup 是一个用于运行时值解析和验证的模式构建器，定义模式、转换值以匹配、断言等。
formik--prop-api链接:https://formik.org/docs/api/f...
yup-github链接:https://github.com/jquense/yup
例子讲解
// 引入所需
// useFormik()是一个自定义的 React 钩子
// 官网使用例子：https://formik.org/docs/api/useFormikimport { 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
并非是预先定义的变量，所以为报错。
所以这里只是普通的字符串里使用了类似模板字符串的语法罢了。
*/// 组件使用
推荐阅读
