[ 卡卡 DAY 23 ] - React Native 表单套件用 Formik + Yup 验证（上）

在网路上看到有人推荐 Formik
不仅符合 react native 也可以在 react 上使用
文件简单易懂而且一直保有更新
就因如此，今天我们来学习如何使用吧！

安装

npm i formik

Formikx 提供

Formik、Form、Field 及 ErrorMessage 组件。

Formik 也提供 useFormik hook 的写法使用
Formil / useFormik 的 props

initialValues 给予初始值
enableReinitialize 允许重复初始来满足初始值重载需求，也就是运用 state 来改变值，ㄉ
validate/validationSchema 验证条件
onSubmit 送出事件

验证条件分两种

validate 自己写验证条件
validationSchema 检核逻辑，运用堆叠的方式，建议搭配 Yup

必须给予 name 作为栏位识别，来对应 vlaue，因为 values, ErrorMessage, touched 物件，里面的 key 都会和 input 的 name 对应。
setFieldValue func 来调整栏位数值
可以用 onclick 事件写入 setFieldValue 来改变栏位的值
ex. setFieldValue('name',value)

简单 code 呈现如下：

const Form = () => {
  return(
    <View>
      <Formik
        initialValues={
            // initialValues
        }
        onSubmit={(values) => {
          // values to submit
        }}
        validationSchema={
          {
            // validation rules here
          }
        }
        enableReinitialize
      >
        {(props) => <FormComponent />} // form UI
      </Formik>
    </View>
  )
};

export default Form;

useFormik Hook 的方式

import { useFormik } from 'formik';
const Form = () => (
  <View>
    <Formik
      initialValues={
          // initialValues
      }
      onSubmit={(values) => {
        // values to submit
      }}
      validationSchema={
        {
          // validation rules here
        }
      }
      enableReinitialize
    >
      {(props) =>
        // form UI
        <View style={styles.formBox}>
          <TextInput
            name="title"
            style={styles.input}
            placeholder="Review title"
            onChangeText={props.handleChange("title")}
            value={props.values.title}
            // 加上着个只要碰过就会检查 validationSchema
            onBlur={props.handleBlur("title")}
          />
          <Text style={styles.errorText}>
            // 按了btn才会检查 validationSchema
            {props.touched.title && props.errors.title}
          </Text>
          <Button
            title="submit"
            color="maroon"
            onPress={props.handleSubmit}
          />
        </View>}
    </Formik>
  </View>
);

export default Form;

debug

可由官网下载debug放入 Form 标签里面

import { Debug } from './Debug';

const Form = () => (
  <View>
    <Formik
      initialValues={
          /*initialValues*/
      }
      onSubmit={(values) => {
        /* values to submit ... */
      }}
      validationSchema={
        {
          /* validation rules here */
        }
      }
      enableReinitializ
    >
      {(props) =>
        <View style={styles.formBox}>
          <TextInput
            name="title"
            style={styles.input}
            placeholder="Review title"
            onChangeText={props.handleChange("title")}
            value={props.values.title}
            // 加上着个只要碰过就会检查 validationSchema
            onBlur={props.handleBlur("title")}
          />
          <Text style={styles.errorText}>
            // 按了btn才会检查 validationSchema
            {props.touched.title && props.errors.title}
          </Text>
          <Button
            title="submit"
            color="maroon"
            onPress={props.handleSubmit}
          />
          // put DEBUG COMPONENT here
          <Debug />
        </View>}
    </Formik>
  </View>
);

export default Form;

yup 介绍

Yup 是一个用於解析和验证 JS 的生成器，使用 object 的验证套件，API 受 Joi 的启发很大，但更为精简，可以用堆叠的方式加入条件，基本上 Formik 完全为了 Yup 量身打造一个可以直接设置 Yup 验证规则的属性，也就是 validationSchema

安装

npm i yup
cd ios
pod install

基本介绍

引入

import * as yup from 'yup'

yupObject().shape 定义验证规则，条件堆叠再一起

const schema = yupObject().shape({
  // 名字 字串 必填
  name: yup.string().required(),
  // 年纪 数字 最小为18 必填
  age: yup.number().min(18).required(),
  // 密码 字串 必填
  pcode: yup.string().required(),
  // 密码确认 密码输入後才检核 必填 需与密码栏位输入的资讯相同 (相依输入值)
  pcodeConfirm: yup.string().when('pcode', (pcode, schema) => {
  return pcode ? schema.oneOf([pcode], '密码需相同').required() : schema
  })
});