关于react.js:formikyup书写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/f…
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="exmple@mail.com" 
        variant="outlined" size="small" 
        type="email" 
        fullWidth 
        onBlur={handleBlur} 
        onChange={handleChange} 
        value={values.email || ''} 
        error={!!touched.email && !!errors.email} 
        helperText={touched.email && errors.email} />