反应很快

Question

我是新手。我尝试使用formik和yup进行表单验证，但遇到了一个问题。我的验证工作正常，但如果我输入一个字段，所有字段都会向验证显示如何限制它。如果我输入名称字段并输入一些信息，它将显示以下所有字段，并显示"验证错误"。我想像onBlur一样使用它我们如何在formik中使用它？

import React from "react";
import "./App.css";
import { useFormik } from "formik";
import * as yup from "yup";
const App = () => {
const formik = useFormik({
initialValues: {
name: "",
email: "",
list: "",
password: "",
confirmPassword: ""
},
validationSchema: yup.object({
name: yup
.string()
.strict()
.trim()
.required("Name is required")
.min(5, "Minimum 5 cars required")
.max(15, "maximum 15 cars only"),
email: yup
.string()
.email()
.required("Email is required"),
list: yup.string().required(),
password: yup.string().required("password is required"),
confirmPassword: yup
.string()
.oneOf(
[yup.ref("password"), null],
"Confirm password must same as password"
)
.required("password is required")
}),
onSubmit: userInputData => {
console.log(userInputData);
}
});
return (
<div className="container mt-3">
<div className="jumbotron">
<form onSubmit={formik.handleSubmit}>
<div className="form-group">
<label>Name:</label>
<input
type="text"
name="name"
className="form-control"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.errors.name ? (
<div className="text-danger">{formik.errors.name}</div>
) : null}
</div>
<div className="form-group">
<label>Email</label>
<input
type="text"
name="email"
className="form-control"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.errors.email ? (
<div className="text-danger">{formik.errors.email}</div>
) : null}
</div>
<div className="form-group">
<label>Select List</label>
<select
className="form-control"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
value={formik.values.list}
name="list"
>
<option value="">--- select one ---</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
{formik.errors.list ? (
<div className="text-danger">{formik.errors.list}</div>
) : null}
</div>
<div className="form-group">
<label>Password</label>
<input
type="password"
name="password"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
className="form-control"
value={formik.values.password}
/>
{formik.errors.password ? (
<div className="text-danger">{formik.errors.password}</div>
) : null}
</div>
<div className="form-group">
<label>Confirm Password</label>
<input
type="password"
name="confirmPassword"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
value={formik.values.confirmPassword}
className="form-control"
/>
{formik.errors.confirmPassword ? (
<div className="text-danger">{formik.errors.confirmPassword}</div>
) : null}
</div>
<button type="submit" className="btn btn-primary">
Submit
</button>
</form>
</div>
</div>
);
};
export default App;

Answer 1

使用touched属性。

像这个代码

{formik.errors.email ? ( <div className="text-danger">{formik.errors.email}</div> ) : null}

你可以使用像这个一样的触摸属性

{formik.touched.email && formik.errors.email && ( <div className="text-danger">{formik.errors.email}</div> )}

文件中提到了这一点——https://jaredpalmer.com/formik/docs/tutorial