简单介绍 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><FormikinitialValues={{ email: "" }}onSubmit={(values) => console.log(values)}>{/* 渲染属性 */}{({ handleChange, handleBlur, handleSubmit, values }) => (<View><TextInputstyle={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><FormikinitialValues={{ email: "" }}onSubmit={(values) => console.log(values)}validationSchema={userSchema}>{/* 渲染参数 */}{({handleChange,errors,handleSubmit,values,dirty,handleReset,}) => (<View><TextInputstyle={styles.inputItem}onChangeText={handleChange("email")}value={values.email}/>{errors.email ? <Text>{errors.email}</Text> : ""}<ButtononPress={() => {console.log(dirty);handleSubmit();}}title="提交表单"/><Button onPress={() => handleReset()} title="重置" /></View>)}</Formik></View>);
}