使用Formik实现React表单验证的最佳实践
表单验证基础
在Web应用开发中，表单验证是确保用户输入数据有效性的关键环节。在表单提交前，必须进行数据验证，只有验证通过的数据才能被提交到服务器。
表单验证方案对比
在React项目中，处理表单验证有多种选择：
- UI组件库内置验证：如Ant Design Mobile的InputItem组件
- 通用表单处理库：Formik专门为React设计的表单处理和验证库
虽然组件库的表单组件提供了内置验证功能，但Formik作为通用解决方案，提供了更灵活、更强大的表单处理能力。
Formik库介绍
项目信息
- GitHub地址：Formik官方文档
- 适用场景：表单状态管理、表单验证、表单提交处理
核心优势
- 简化React应用中的复杂表单处理
- 统一管理表单值、验证规则和错误信息
- 提供清晰的API，便于代码阅读、维护和测试
- 支持两种使用模式：高阶组件(HOC)和Render Props
使用Formik实现登录表单
项目初始化
- 安装Formik：
yarn add formik - 导入withFormik高阶组件
- 使用withFormik包装登录组件
基础实现步骤
- 为withFormik提供配置对象：
mapPropsToValues和handleSubmit - 在登录组件中通过props获取表单值(values)、提交处理函数(handleSubmit)和变更处理函数(handleChange)
- 将表单元素的value属性绑定到values中的对应值
- 将表单元素的onChange事件绑定到handleChange函数
- 将表单的onSubmit事件绑定到handleSubmit函数
- 在handleSubmit函数中实现表单提交逻辑
示例代码
// 登录组件实现
class LoginForm extends React.Component {
render() {
// 通过props获取高阶组件传递的方法和状态
const { formValues, submitHandler, inputChangeHandler } = this.props
return (
<div className="login-container">
<h2>用户登录</h2>
<form onSubmit={submitHandler}>
<div className="form-group">
<input
className="form-input"
value={formValues.account}
onChange={inputChangeHandler}
name="account"
placeholder="请输入用户名"
/>
</div>
<div className="form-group">
<input
className="form-input"
value={formValues.passcode}
onChange={inputChangeHandler}
name="passcode"
type="password"
placeholder="请输入密码"
/>
</div>
<div className="submit-section">
<button className="submit-btn" type="submit">
登录
</button>
</div>
</form>
</div>
)
}
}
// 使用withFormik高阶组件包装登录组件
LoginForm = withFormik({
// 初始化表单状态
mapPropsToValues: () => ({ account: '', passcode: '' }),
// 表单提交处理
handleSubmit: async (formData, { props }) => {
const { account, passcode } = formData
try {
// 发送登录请求
const response = await API.post('/auth/login', {
username: account,
password: passcode
})
const { code, data, message } = response.data
if (code === 200) {
// 登录成功，保存token
localStorage.setItem('auth_token', data.token)
// 返回上一页
props.history.goBack()
} else {
// 登录失败，显示错误信息
Alert.alert(message)
}
} catch (error) {
Alert.alert('网络错误，请稍后重试')
}
}
})(LoginForm)
表单验证的两种实现方式
Formik提供了两种表单验证的实现方式：
- 通过validate配置函数手动实现校验逻辑
- 通过validationSchema配置项配合Yup库进行声明式校验
推荐使用第二种方式，因为它提供了更简洁、更强大的验证规则定义能力。
使用Yup进行表单验证
- 安装Yup：
yarn add yup - 导入Yup库
- 在withFormik配置中添加validationSchema属性
- 在组件中显示验证错误信息
示例代码
// 导入Yup
import * as Yup from 'yup'
// 使用withFormik包装组件，添加验证规则
LoginForm = withFormik({
// 初始值
mapPropsToValues: () => ({ account: '', passcode: '' }),
// 表单验证规则
validationSchema: Yup.object().shape({
account: Yup.string()
.required('用户名不能为空')
.matches(/^[a-zA-Z0-9_]{5,8}$/, '用户名必须是5-8位字母、数字或下划线'),
passcode: Yup.string()
.required('密码不能为空')
.matches(/^[a-zA-Z0-9_]{5,12}$/, '密码必须是5-12位字母、数字或下划线')
}),
// 提交处理
handleSubmit: async (values, { props }) => {
// 提交逻辑...
}
})(LoginForm)
// 在组件中显示错误信息
render() {
const { formValues, submitHandler, inputChangeHandler, errors, touched, blurHandler } = this.props
return (
<div className="login-container">
<h2>用户登录</h2>
<form onSubmit={submitHandler}>
<div className="form-group">
<input
className="form-input"
value={formValues.account}
onChange={inputChangeHandler}
onBlur={blurHandler}
name="account"
placeholder="请输入用户名"
/>
{errors.account && touched.account && (
<div className="error-msg">{errors.account}</div>
)}
</div>
<div className="form-group">
<input
className="form-input"
value={formValues.passcode}
onChange={inputChangeHandler}
onBlur={blurHandler}
name="passcode"
type="password"
placeholder="请输入密码"
/>
{errors.passcode && touched.passcode && (
<div className="error-msg">{errors.passcode}</div>
)}
</div>
<div className="submit-section">
<button className="submit-btn" type="submit">
登录
</button>
</div>
</form>
</div>
)
}
使用Formik组件简化代码
Formik提供了几个专用组件，可以进一步简化表单代码：
- Form组件：替代form元素
- Field组件：替代input元素
- ErrorMessage组件：自动处理错误信息显示
优化后的代码示例
// 导入Formik相关组件
import { withFormik, Form, Field, ErrorMessage } from 'formik'
// 使用Form组件重构登录表单
render() {
const { submitHandler } = this.props
return (
<div className="login-container">
<h2>用户登录</h2>
<Form onSubmit={submitHandler}>
<div className="form-group">
<Field
className="form-input"
name="account"
type="text"
placeholder="请输入用户名"
/>
<ErrorMessage
name="account"
component="div"
className="error-msg"
/>
</div>
<div className="form-group">
<Field
className="form-input"
name="passcode"
type="password"
placeholder="请输入密码"
/>
<ErrorMessage
name="passcode"
component="div"
className="error-msg"
/>
</div>
<div className="submit-section">
<button className="submit-btn" type="submit">
登录
</button>
</div>
</Form>
</div>
)
}
通过使用Formik的专用组件，我们可以减少大量样板代码，使表单组件更加简洁和易于维护。
