应用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/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并非是事后定义的变量，所以为报错。所以这里只是一般的字符串里应用了相似模板字符串的语法罢了。*/// 组件应用 <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} />