如何解决在React上注册表格的Formik / Yup验证
我正在学习React，因此我决定创建一个React前端，该后端连接到后端的Express.js。目前，我正在尝试在我的注册/登录表单上添加验证。我不太了解验证系统是如何实施的。我注意到教程使用Formik / Yup的功能组件，但是，我使用的是基于类的组件。
当我尝试渲染注册页面时，它不显示任何内容。当然，我肯定执行不正确，无法弄清楚该怎么做。谢谢您的帮助。
import React,{ Component } from "react";
import { register } from "./UserFunctions";
import { Formik,Field } from "formik";
import * as Yup from "yup";
// const validationSchema = yup.object().shape({
// first_name: yup.string
// })
class Register extends Component {
constructor() {
super();
this.state = {
first_name: "",last_name: "",email: "",password: "",errors: {},};
this.onChange = this.onChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
onChange(e) {
this.setState({ [e.target.name]: e.target.value });
}
onSubmit(e) {
e.preventDefault();
//new user object
const newUser = {
first_name: this.state.first_name,last_name: this.state.last_name,email: this.state.email,password: this.state.password,};
//if register function succesful,redirect to login page
register(newUser).then((res) => {
this.props.history.push(`/login`);
});
}
render() {
return (
<div className="container">
<div className="row">
<div className="col-md-6 mt-5 mx-auto">
<Formik
initialValues={{
first_name: "",}}
validationSchema={Yup.object().shape({
first_name: Yup.string()
.required("First Name is required.")
.min(1,"First Name is Too Short."),last_name: Yup.string()
.required("Last Name is required.")
.min(1,"Last Name is Too Short."),email: Yup.string().email().required("Email is required."),password: Yup.string()
.required("No password provided.")
.min(8,"Password is too short - should be 8 chars minimum.")
.matches(/(?=.*[0-9])/,"Password must contain a number."),})}
>
{(props) => {
const {
touched,errors,isSubmitting,handleChange,handleBlur,handleSubmit,} = props;
<form novalidate onSubmit={this.onSubmit}>
<h1 className="h3 mb-3 font-weight-normal">Register</h1>
<div className="form-group">
<label htmlFor="name">First name</label>
<input
type="text"
className="form-control"
name="first_name"
placeholder="Enter your first name"
value={this.state.first_name}
onChange={this.onChange}
/>
{errors.first_name && touched.first_name && (
<div className="input-Feedback">{errors.first_name}</div>
)}
</div>
<div className="form-group">
<label htmlFor="name">Last name</label>
<input
type="text"
className="form-control"
name="last_name"
placeholder="Enter your last name"
value={this.state.last_name}
onChange={this.onChange}
/>
{errors.last_name && touched.last_name && (
<div className="input-Feedback">{errors.last_name}</div>
)}
</div>
<div className="form-group">
<label htmlFor="email">Email address</label>
<input
type="email"
className="form-control"
name="email"
placeholder="Enter email"
value={this.state.email}
onChange={this.onChange}
/>
{errors.email && touched.email && (
<div className="input-Feedback">{errors.email}</div>
)}
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input
type="password"
className="form-control"
name="password"
placeholder="Password"
value={this.state.password}
onChange={this.onChange}
/>
{errors.password && touched.password && (
<div className="input-Feedback">{errors.password}</div>
)}
</div>
<button
type="submit"
className="btn btn-lg btn-primary btn-block"
>
Register!
</button>
</form>;
}}
</Formik>
</div>
</div>
</div>
);
}
}
export default Register;解决方法
Formik在尝试提交时会验证表单，如果存在任何错误，不允许提交表单，则当用户尝试提交有错误的错误时，由您向用户显示错误消息，请参见{{ 3}}供参考
,- 首先，在使用表单库时不需要使用状态。使用表单库的主要目的是封装状态并减少样板。
- Formik 本身是用于表单状态的容器。
- 请注意：-您应该使用
values（其中包含您的表单数据）和handleChange将 formik 表单数据的值传递到输入字段中形式 - Formik 以
onSubmit作为道具，您可以在验证后获取表单状态，然后在这里注册新用户。
此外，您可以检查codesandbox link here。
import React,{ Component } from "react";
// import { register } from "./UserFunctions";
import { Formik } from "formik";
import * as Yup from "yup";
const schema = Yup.object().shape({
first_name: Yup.string()
.required("First Name is Required.")
.min(1,"First Name is Too Short."),last_name: Yup.string()
.required("Last Name is Required.")
.min(1,"Last Name is Too Short."),email: Yup.string().email().required("Email is Required."),password: Yup.string()
.required("No password provided.")
.min(8,"Password is too short - should be 8 chars minimum.")
.matches(/(?=.*[0-9])/,"Password must contain a number.")
});
class Register extends Component {
render() {
return (
<div className="container">
<div className="row">
<div className="col-md-6 mt-5 mx-auto">
<Formik
initialValues={{
first_name: "",last_name: "",email: "",password: ""
}}
validationSchema={schema}
// tell the formik to validate onBlur
validateOnBlur
onSubmit={(values) => {
// here you have the access to the form data
// values.first_name,values_last_name,values_email,values_password
//if register function succesful,redirect to login page
// register(values).then((res) => {
// this.props.history.push(`/login`);
// })
}}
>
{(props) => {
const {
touched,errors,handleSubmit,values,handleChange,handleBlur,} = props;
return (
<form noValidate onSubmit={handleSubmit}>
<h1 className="h3 mb-3 font-weight-normal">Register</h1>
<div className="form-group">
<label htmlFor="name">First name</label>
<input
type="text"
className="form-control"
name="first_name"
placeholder="Enter your first name"
value={values.first_name}
onChange={handleChange}
onBlur={handleBlur}
/>
{errors.first_name && touched.first_name && (
<div className="input-feedback">
{errors.first_name}
</div>
)}
</div>
<div className="form-group">
<label htmlFor="name">Last name</label>
<input
type="text"
className="form-control"
name="last_name"
placeholder="Enter your last name"
value={values.last_name}
onChange={handleChange}
onBlur={handleBlur}
/>
{errors.last_name && touched.last_name && (
<div className="input-feedback">{errors.last_name}</div>
)}
</div>
<div className="form-group">
<label htmlFor="email">Email address</label>
<input
type="email"
className="form-control"
name="email"
placeholder="Enter email"
value={values.email}
onChange={handleChange}
onBlur={handleBlur}
/>
{errors.email && touched.email && (
<div className="input-feedback">{errors.email}</div>
)}
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input
type="password"
className="form-control"
name="password"
placeholder="Password"
value={values.password}
onChange={handleChange}
onBlur={handleBlur}
/>
{errors.password && touched.password && (
<div className="input-feedback">{errors.password}</div>
)}
</div>
<button
type="submit"
className="btn btn-lg btn-primary btn-block"
>
Register!
</button>
</form>
);
}}
</Formik>
</div>
</div>
</div>
);
}
}
export default Register;
这是您的代码，具有功能组件，并且代码行较少，可以正常工作
import React from "react";
import { useFormik } from "formik";
import { register } from "./UserFunctions";
import * as Yup from "yup";
const Register = ({ history }) => {
const validationSchema = Yup.object().shape({
first_name: Yup.string()
.required("First Name is Required.")
.min(1,last_name: Yup.string()
.required("Last Name is Required.")
.min(1,password: Yup.string()
.required("No password provided.")
.min(8,"Password is too short - should be 8 chars minimum.")
.matches(/(?=.*[0-9])/,"Password must contain a number."),});
const formik = useFormik({
initialValues: {
first_name: "",password: "",},validationSchema: validationSchema,onSubmit: (values) => {
const newUser = {
first_name: values.first_name,last_name: values.last_name,email: values.email,password: values.password,};
//if register function succesful,redirect to login page
register(newUser).then((res) => {
history.push(`/login`);
});
},});
return (
<div className="container">
<div className="row">
<div className="col-md-6 mt-5 mx-auto">
<form noValidate onSubmit={formik.handleSubmit}>
<h1 className="h3 mb-3 font-weight-normal">Register</h1>
<div className="form-group">
<label htmlFor="name">First name</label>
<input
type="text"
className="form-control"
name="first_name"
placeholder="Enter your first name"
value={formik.values.first_name}
onChange={formik.handleChange}
/>
{formik.errors.first_name && formik.touched.first_name && (
<div className="input-feedback">{formik.errors.first_name}</div>
)}
</div>
<div className="form-group">
<label htmlFor="name">Last name</label>
<input
type="text"
className="form-control"
name="last_name"
placeholder="Enter your last name"
value={formik.values.last_name}
onChange={formik.handleChange}
/>
{formik.errors.last_name && formik.touched.last_name && (
<div className="input-feedback">{formik.errors.last_name}</div>
)}
</div>
<div className="form-group">
<label htmlFor="email">Email address</label>
<input
type="email"
className="form-control"
name="email"
placeholder="Enter email"
value={formik.values.email}
onChange={formik.handleChange}
/>
{formik.errors.email && formik.touched.email && (
<div className="input-feedback">{formik.errors.email}</div>
)}
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input
type="password"
className="form-control"
name="password"
placeholder="Password"
value={formik.values.password}
onChange={formik.handleChange}
/>
{formik.errors.password && formik.touched.password && (
<div className="input-feedback">{formik.errors.password}</div>
)}
</div>
<button type="submit" className="btn btn-lg btn-primary btn-block">
Register!
</button>
</form>
;
</div>
</div>
</div>
);
};
export default Register;
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。