使用 yup 在 formik 库中进行验证

Question

我有一个名为 Signup 的组件与打字稿项目反应：

import React from "react";
import { useFormik } from "formik";
import * as Yup from "yup";
import girlImage from "../../images/girl_img.png";
import "./Signup.css";

function Signup() {
  const formik = useFormik({
    initialValues: {
      photo: "",
      name: "",
      email: "",
      phone: "",
      password: "",
      cpassword: "",
    },
    validationSchema: Yup.object({
      //name: Yup.string.required(""),
      email: Yup.string().email("invalid email").required("required"),
      password: Yup.string().required("Password is required"),
      cpassword: Yup.string().oneOf(
        [Yup.ref("password"), null],
        "Passwords must match"
      ),
    }),
    onSubmit: (values) => {
      console.log(values);
      //formik.resetForm();
    },
  });
  return (
    <div className="signup">
      <div className="container">
        <div className="two-col-wrap">
          <div className="left-block">
            <h1 className="title">Signup</h1>
            <form>
              <div className="form-control">
                <label htmlFor="photo" id="photo-label">
                  Photo +
                </label>
                <input type="file" id="photo" name="photo" />
              </div>
              <div className="form-control">
                <label htmlFor="name">Name</label>
                <input
                  type="text"
                  id="name"
                  name="name"
                  value={formik.values.name}
                  onChange={formik.handleChange}
                  onBlur={formik.handleBlur}
                />
              </div>
              <div className="form-control">
                <label htmlFor="email">Email</label>
                <input
                  type="email"
                  id="email"
                  name="email"
                  value={formik.values.email}
                  onChange={formik.handleChange}
                  onBlur={formik.handleBlur}
                />
              </div>
              <div className="form-control">
                <label htmlFor="phone">PhoneNo</label>
                <input type="tel" id="phone" name="phone" />
              </div>
              <div className="form-control">
                <label htmlFor="password">Password</label>
                <input type="password" id="password" name="password" />
              </div>
              <div className="form-control">
                <label htmlFor="cpassword">Confirm Password</label>
                <input type="password" id="cpassword" name="cpassword" />
              </div>
              <div className="buttons-container">
                <button className="submit-btn">submit</button>
                <button className="reset-btn">Reset</button>
              </div>
            </form>
          </div>
          <div className="right-block">
            <img src={girlImage} alt="girl" />
          </div>
        </div>
      </div>
    </div>
  );
}

export default Signup;

我是 formik 的新手，想用 Yup 在 formik 中实现这些验证。姓名：必填，至少15个字符。电子邮件：验证电子邮件约定，必需 phone否：印度人 phone否。仅有效，必需密码和确认密码应该匹配图片应为jpg或png类型，或小于2Mb

有什么帮助吗？

Answer 1

这对我有用：

const phoneRegExp = /^[6-9]\d{9}$/;

    validationSchema: Yup.object({
          email: Yup.string().email("invalid email").required("required"),
          phone: Yup.string().matches(phoneRegExp, "Phone number is not valid"),
          password: Yup.string().required("Password is required"),
          name: Yup.string()
            .min(15, "min 15 characters are required")
            .required("name is required"),
          cpassword: Yup.string().oneOf(
            [Yup.ref("password"), null],
            "Passwords must match"
          ),
        }),

使用 yup 在 formik 库中进行验证

validations in formik librabry using yup

typescript

reactjs

yup

formik