React-formik、yup基本使用方法（建议收藏）


formik

概述

  • 使用formik配合yup可以快速帮助我们实现表单校验并提示错误信息

// 安装

npm install formik --save

// 在页面中引入

import { Form, Field, withFormik, ErrorMessage } from “formik”

  • 官网地址：formik

在这里插入图片描述

基本使用

FORM

  • formik的Form组件是围绕原生form标签的小包装，可以快速的重置表单或提交表单
  • 使用 组件替代原生的标签
  • 并且使用withFormik高阶组件来包装你所写的那个组件
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // withFormik组件被调用是传入的组件才是被包装的组件
    // withFormik组件接收一个配置对象，来处理被包装的表单
    Demo = withFromik({
        // 表单内部数据
        mapPropsToValues: () => ({ username: '', password: '' }),
        // 表单被提交时触发该函数
        handleSubmit:(value,{props})=>{
            // 从value中可以获取到mapPropsToValues中的值
            const {username,password} = value
            // props就是react中的this.props,可以实现路由跳转
            props.history.go(-1)
        }
    })(Demo)

Field

  • Field组件就是原生input标签的小包装
  • 通过withFormik高阶组件进行包装后，通过在Field上设置name属性，便可以获取到mapPropsToValues中定义的数据，当然名字得要一致
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
      <Form>
        <Field
            // 类名
            className="input"
            // mapPropsToValues中的键名
        name="username"
        placeholder="请输入账号"
         />
      </Form>

ErrorMessage

  • ErrorMessage组件是一个错误提示组件，当表单提交，校验不通过时会提示用户
  • ErrorMessage组件必须添加name属性，来绑定要校验的属性
  • 1
    2
    3
    // name属性为mapPropsToValues中键名
    // component属性为提示信息是由什么标签显示
    <ErrorMessage name="username" component="div" className="error" />

yup

概述

  • Yup是一个用于值解析和验证的JavaScript模式生成器
  • Yup的API受Joi的启发很大，但更为精简，并以客户端验证作为主要用例而构建
  • npm地址：yup

// 安装

npm install yup --save

基本使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    // 导入
    import * as yup from 'yup' 
    // 定义校验规则
    let schema = yup.object().shape({
        // name的值为字符串
        name: yup.string(),
        // age的值为数字，最小18
    age: yup.number().min(18),
    });

    schema.cast({
    name: 'jimmy',
    age: '24'
    })

formik与yup配合使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
        Demo = withFromik({
        //  表单内部数据
        mapPropsToValues: () => ({ username: '', password: '' }),
        // 表单被提交时触发该函数
        handleSubmit:(value,{props})=>{
            // 从value中可以获取到mapPropsToValues中的值
            const {username,password} = value
            // props就是react中的this.props,可以实现路由跳转
            props.history.go(-1)
        },
        // 表单校验规则,在表单失去焦点时会自动触发
        validationSchema: yup.object().shape({
            // yup必须先规定数据类型才能添加其他的配置，matches可以用来匹配正则校验规则
            username: yup.string().trim().required("请输入用户名").matches(/^[a-zA-Z_\d]{5,8}$/,"长度为5到8位，只能出现数字、字母、下划线"),
            password: yup.string().trim().required("请输入密码").matches(/^[a-zA-Z_\d]{5,12}$/,"长度为5到12位，只能出现数字、字母、下划线")
        })
    })(Demo)