formik-yup书写React表单验证

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

不使用插件，form表单验证

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

// 关键代码逻辑
//组件触发区
<TextField
    id="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 = reg.test(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链接:https://formik.org/docs/api/formik#props
yup-github链接:https://github.com/jquense/yup

例子讲解

// 引入所需
// useFormik()是一个自定义的 React 钩子
// 官网使用例子：https://formik.org/docs/api/useFormik

import { 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="[e-mail]" 
        variant="outlined" size="small" 
        type="email" 
        fullWidth 
        onBlur={handleBlur} 
        onChange={handleChange} 
        value={values.email || ''} 
        error={!!touched.email && !!errors.email} 
        helperText={touched.email && errors.email} />