乐趣区

关于react.js:formikyup书写React表单验证

jiezi

应用 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} />
退出移动版