使用yup和formik可以实现在表单验证过程中显示字段值的验证消息。yup是一个JavaScript对象模式验证库,而formik是一个用于构建React表单的库。
在使用yup和formik进行表单验证时,可以通过yup的验证规则来定义字段的验证要求,并使用formik来处理表单的状态和提交。当字段的值不符合验证规则时,可以通过yup提供的错误消息来显示验证失败的信息。
以下是一个示例代码,演示了如何使用yup和formik来显示字段值的验证消息:
npm install yup formik
import React from 'react';
import { useFormik } from 'formik';
import * as yup from 'yup';
const validationSchema = yup.object().shape({
name: yup.string().required('请输入姓名'),
email: yup.string().email('请输入有效的邮箱地址').required('请输入邮箱地址'),
});
在上面的代码中,我们定义了两个字段name和email的验证规则,并为每个字段提供了相应的错误消息。
const MyForm = () => {
const formik = useFormik({
initialValues: {
name: '',
email: '',
},
validationSchema: validationSchema,
onSubmit: (values) => {
console.log(values);
},
});
return (
<form onSubmit={formik.handleSubmit}>
<div>
<label htmlFor="name">姓名:</label>
<input
id="name"
name="name"
type="text"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
value={formik.values.name}
/>
{formik.touched.name && formik.errors.name ? (
<div>{formik.errors.name}</div>
) : null}
</div>
<div>
<label htmlFor="email">邮箱:</label>
<input
id="email"
name="email"
type="email"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
value={formik.values.email}
/>
{formik.touched.email && formik.errors.email ? (
<div>{formik.errors.email}</div>
) : null}
</div>
<button type="submit">提交</button>
</form>
);
};
在上面的代码中,我们创建了一个表单,并使用formik提供的hook函数useFormik来处理表单的状态和提交。在每个字段的输入框后面,我们使用条件渲染来显示验证失败的错误消息。
const App = () => {
return (
<div>
<h1>表单验证示例</h1>
<MyForm />
</div>
);
};
在上面的代码中,我们将表单组件MyForm嵌入到应用的根组件中。
这样,当用户在表单中输入字段值时,yup会根据定义的验证规则进行验证,并在验证失败时显示相应的错误消息。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云数据库MySQL。
领取专属 10元无门槛券
手把手带您无忧上云