reactJS中的表单验证答案

【问题标题】：Form Validation in reactJSreactJS中的表单验证
【发布时间】：2021-02-08 15:15:50
【问题描述】：

所以这不是问题，但是当我尝试验证我的表单时，我通常会使用大量

if(){
}else if(){
}
.
.
.
else{
}

但它既费时又干净的代码，看起来并不好。那么有没有一种表单验证组件或更好的方法来做到这一点？任何参考都会非常有用。

【问题讨论】：

标签： javascript reactjs forms validation formvalidation-plugin

【解决方案1】：

您可以将Formik 与Yup 一起使用

validation schema


 const SignupSchema = Yup.object().shape({
   firstName: Yup.string()
     .min(2, 'Too Short!')
     .max(50, 'Too Long!')
     .required('Required'),
   lastName: Yup.string()
     .min(2, 'Too Short!')
     .max(50, 'Too Long!')
     .required('Required'),
   email: Yup.string().email('Invalid email').required('Required'),
 });

很好的开始here

【讨论】：

【解决方案2】：

如果你更喜欢使用像 formik 这样的包，你可以使用@Yoel 给出的答案。
您有默认 HTML5 验证，您可以使用它并使用 JS setCustomValidity() API 设置验证消息。

【讨论】：

我可以建议您添加此链接以使您的答案更有帮助吗？ developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation
是的，MDN 是最好的之一。