简单介绍 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>);
}