简单介绍 React Native 整合 Formik 实现表单校验

Formik 是 React 和 React Native 开源表单库，Formik 负责处理重复且烦人的事情——跟踪值/错误/访问的字段、编排验证和处理提交——所以您不必这样做。而简化字段校验的话我们可以使用yup工具来实现。

首先安装Formik 和 Yup

npm i formik
npm i yup

Formik 与 React Native 简单实例

首先我们先实现一个简单的实例，体验一下Formik框架的使用过程。

export default function FormikCheck() {
  return (
    <View style={styles.container}>
      <Text style={styles.mainTitle}>表单校验</Text>
      <Formik
        initialValues={{ email: "" }}
        onSubmit={(values) => console.log(values)}
      >
        {/* 渲染属性 */}
        {({ handleChange, handleBlur, handleSubmit, values }) => (
          <View>
            <TextInput
              style={styles.inputItem}
              onChangeText={handleChange("email")}
              onBlur={handleBlur("email")}
              value={values.email}
            />
            <Button onPress={() => handleSubmit()} title="提交表单" />
          </View>
        )}
      </Formik>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
  },
  mainTitle: {
    fontSize: 20,
    paddingBottom: 10,
    borderBottomWidth: 1,
    borderBottomColor: "#e3e3e3",
    marginBottom: 10,
  },
  inputItem: {
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: "#e3e3e3",
    marginBottom: 10,
  },
});

Formik 常用属性和方法说明

通过上述的例子可以看到，我们使用的是Formik框架中的Formik组件来包裹表单元素从而进行表单的是有相关操作。

Formik组件每个渲染方法常用的属性有如下几个：

属性	类型	说明
errors	{ [field: string]: string }	表单错误信息，所有表单对应的字段校验错误信息都在这个对象中
handleReset	() => void	重置处理程序。将表单重置为其初始状态
handleSubmit	(e: React.FormEvent) => void	提交处理程序

Formik组件常用的方法和属性有如下几个：

方法 / 属性	参数	说明
initialValues	Values	表单的初始字段值
validationSchema	Schema 或者 (() => Schema)	Yup 模式或返回 Yup 模式的函数。这用于验证。错误通过键映射到内部组件的错误。它的键应该与值的键匹配。
onReset	(values: Values, formikBag: FormikBag) => void	表单重置处理程序
onSubmit	(values: Values, formikBag: FormikBag) => void Promise	表单提交处理程序

Formik 与 yup 一起使用进行表单校验

Formik框架只是为我们简化表单的操作，当出现表单字段特别多的时候，我们一个一个字段进行表单字段值的校验这很麻烦，所以我们可以使用yup工具来帮我们简化校验流程。具体实例如下：

const userSchema = Yup.object().shape({
  email: Yup.string().email("Invalid email address"),
});

export default function FormikCheck() {
  return (
    <View style={styles.container}>
      <Text style={styles.mainTitle}>表单校验</Text>
      <Formik
        initialValues={{ email: "" }}
        onSubmit={(values) => console.log(values)}
        validationSchema={userSchema}
      >
        {/* 渲染参数 */}
        {({
          handleChange,
          errors,
          handleSubmit,
          values,
          dirty,
          handleReset,
        }) => (
          <View>
            <TextInput
              style={styles.inputItem}
              onChangeText={handleChange("email")}
              value={values.email}
            />
            {errors.email ? <Text>{errors.email}</Text> : ""}
            <Button
              onPress={() => {
                console.log(dirty);
                handleSubmit();
              }}
              title="提交表单"
            />
            <Button onPress={() => handleReset()} title="重置" />
          </View>
        )}
      </Formik>
    </View>
  );
}