英文:
react.js formik and yup multiple error display
问题
我正在尝试在React.js上使用Formik和Yup进行验证。在我为Yup创建的模式中，有一个电子邮件和密码部分，我只想同时显示密码部分的所有错误，电子邮件部分的错误应按顺序显示，但我无法做到，如果您能帮助我，我将非常感激。
以下是我创建Yup对象的方式：
const validationPageTwo = Yup.object({
email: Yup.string().required("必填字段"),
password: Yup.string()
.required("必填字段密码")
.matches(/^(?=.{8,})/, "必须包含8个字符")
.matches(/^(?=.*[!@#$%\^&\*])/, "至少一个特殊字符")
.matches(/^(?=.*[0-9])/, "至少一个数字")
.matches(/^(?=.*[a-z])/, "至少一个小写字母")
.matches(/^(?=.*[A-Z])/, "至少一个大写字母"),
});
const formik = useFormik({
initialValues: {
name: "",
surname: "",
email: "",
password: "",
},
validationSchema: page === 1 ? validationPageOne : validationPageTwo,
onSubmit: (values) => {
if (page === 1) {
setPage(2);
} else {
alert(JSON.stringify(values));
}
},
});
希望这对您有所帮助。
英文:
I am trying to validate using formik and yup on react.js. In the schema I created for yup, there is an email and password section, I just want to show all the errors in the password section at the same time, the errors in the email section should be displayed in order, but I couldn't do it, but I would be very grateful if you could help me.
Here is how I created the yup object
const validationPageTwo = Yup.object({
email: Yup.string().required("Required field"),
password: Yup.string()
.required("Required field password")
.matches(/^(?=.{8,})/, "Must Contain 8 Characters")
.matches(/^(?=.*[!@#$%\^&\*])/, " One Special Case Character")
.matches(/^(?=.*[0-9])/, " One Number")
.matches(/^(?=.*[a-z])/, " One Lowercase")
.matches(/^(?=.*[A-Z])/, " One Uppercase"),
});
const formik = useFormik({
initialValues: {
name: "",
surname: "",
email: "",
password: "",
},
validationSchema: page === 1 ? validationPageOne :
validationPageTwo,
onSubmit: (values) => {
if (page === 1) {
setPage(2);
} else {
alert(JSON.stringify(values));
}
},
});
答案1
得分: 0
I have translated the code portion for you:
是的，我终于解决了这个问题，如果你愿意，你可以将它用作Formic中的模式，并分别映射所有的错误。感谢所有帮助我解决问题的人。
const validationPageTwo = Yup.object({
email: Yup.string().required("必填字段").email(),
password: Yup.string()
.required("必填字段密码")
.test({
test: (value) => {
let errors = [];
if (!/^(?=.{8,})/.test(value)) {
errors.push("必须包含8个字符");
}
if (!/^(?=.*[!@#\$%\^&\*])/.test(value)) {
errors.push("必须包含一个特殊字符");
}
if (!/^(?=.*[0-9])/.test(value)) {
errors.push("必须包含一个数字");
}
if (!/^(?=.*[a-z])/.test(value)) {
errors.push("必须包含一个小写字母");
}
if (!/^(?=.*[A-Z])/.test(value)) {
errors.push("必须包含一个大写字母");
}
if (errors.length > 0) {
throw new Yup.ValidationError({
errors: errors,
inner: true,
path: "password",
message: errors,
value: value,
name: "ValidationError",
});
}
return true;
},
}),
});
const formik = useFormik({
initialValues: {
email: "",
password: "",
},
validationSchema: validationPageTwo,
onSubmit: (values) => {
alert(JSON.stringify(values));
},
});
const { errors } = formik;
console.log(errors.password);
Please note that the code has been translated, and only the code portion is provided without additional information or responses.
英文:
Yes I finally solved the problem, if you want you can use it as a schema in formic and map all errors separately. Thanks to everyone who helped me solve the problem
const validationPageTwo = Yup.object({
email: Yup.string().required("Required field").email(),
password: Yup.string()
.required("Required field password")
.test({
test: (value) => {
let errors = [];
if (!/^(?=.{8,})/.test(value)) {
errors.push("Must Contain 8 Characters");
}
if (!/^(?=.*[!@#\$%\^&\*])/.test(value)) {
errors.push("One Special Case Character");
}
if (!/^(?=.*[0-9])/.test(value)) {
errors.push("One Number");
}
if (!/^(?=.*[a-z])/.test(value)) {
errors.push("One Lowercase");
}
if (!/^(?=.*[A-Z])/.test(value)) {
errors.push("One Uppercase");
}
if (errors.length > 0) {
throw new Yup.ValidationError({
errors: errors,
inner: true,
path: "password",
message: errors,
value: value,
name: "ValidationError",
});
}
return true;
},
}),
});
const formik = useFormik({
initialValues: {
email: "",
password: "",
},
validationSchema:validationPageTwo,
onSubmit: (values) => {
alert(JSON.stringify(values));
},
});
const { errors } = formik;
console.log(errors.password);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论