React登录页面点击登录按钮后出现验证错误求助

问题描述 #

正在学习React，这是第一个项目。使用React开发的登录页面，点击登录按钮后出现验证错误，已修正所有拼写/打字错误，以下是相关代码和错误截图，请帮忙解决。

相关代码 #

Login.jsx #

import React, { useState } from "react";
import { Link } from "react-router-dom";
import Validation from "./LoginValidation";

function Login() {
  const [values, setValues] = useState({
    email: "",
    password: "",
  });

  const [errors, setErrors] = useState([]);
  const handleInput = (event) => {
    setValues((prev) => ({
      ...prev,
      [event.target.name]: [event.target.value],
    }));
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    setErrors(Validation(values));
  };

  return (
    <div className="d-flex justify-content-center align-items-center bg-primary vh-100">
      <div className="bg-white p-3 rounded w-25">
        <h2>Sign In</h2>
        <form action="" onSubmit={handleSubmit}>
          <div className="mb-3">
            <label htmlFor="email">
              <strong>Email</strong>
            </label>
            <input
              type="email"
              placeholder="Enter Email"
              name="email"
              onChange={handleInput}
              {...(errors.email && (
                <span className="text-danger">{errors.email}</span>
              ))}
              className="form-control rounded-0"
            />
          </div>
          <div className="mb-3">
            <label htmlFor="password">
              <strong>Password</strong>
            </label>
            <input
              type="password"
              placeholder="Enter Password"
              name="password"
              onChange={handleInput}
              {...(errors.password && (
                <span className="text-danger">{errors.password}</span>
              ))}
              className="form-control rounded-0"
            />
          </div>
          <button type="submit" className="btn btn-success w-100 rounded-0">
            Log In
          </button>
          <p>You are agree to our terms and policies</p>
          <Link
            to="/signup"
            className="btn btn-default border w-100 bg-light rounded-0 text-decoration-none"
          >
            Create Account
          </Link>
        </form>
      </div>
    </div>
  );
}

export default Login;

LoginValidation.jsx #

function Validation(values) {
  let error = {};
  const email_pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  const password_pattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,}$/;

  if (values.email === "") {
    error.email = "Name should not be empty";
  } else if (!email_pattern.test(values.email)) {
    error.email = "Email didn't match";
  } else {
    values.email = "";
  }

  if (values.password === "") {
    error.password = "Name should not be empty";
  } else if (!password_pattern.test(values.password)) {
    error.password = "Email didn't match";
  } else {
    values.password = "";
  }
  return error;
}

export default Validation;

错误截图 #

问题修复步骤 #

1. 修正输入值存储逻辑 #

handleInput中错误地将输入值存为数组，导致验证逻辑无法正确判断字符串内容，修改为直接存储字符串：

const handleInput = (event) => {
  setValues((prev) => ({
    ...prev,
    [event.target.name]: event.target.value,
  }));
};

2. 调整错误提示渲染位置 #

不能将span作为input的属性传递，需将错误提示放在input元素之后：

// 邮箱模块修改
<div className="mb-3">
  <label htmlFor="email">
    <strong>Email</strong>
  </label>
  <input
    type="email"
    placeholder="Enter Email"
    name="email"
    onChange={handleInput}
    className="form-control rounded-0"
  />
  {errors.email && <span className="text-danger">{errors.email}</span>}
</div>

// 密码模块同理修改
<div className="mb-3">
  <label htmlFor="password">
    <strong>Password</strong>
  </label>
  <input
    type="password"
    placeholder="Enter Password"
    name="password"
    onChange={handleInput}
    className="form-control rounded-0"
  />
  {errors.password && <span className="text-danger">{errors.password}</span>}
</div>

3. 修复验证函数的文案与逻辑 #

• 修正错误提示文案，使其符合对应字段场景
• 移除直接修改values的代码，避免污染原state：

function Validation(values) {
  let error = {};
  const email_pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  const password_pattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,}$/;

  if (!values.email) {
    error.email = "邮箱不能为空";
  } else if (!email_pattern.test(values.email)) {
    error.email = "邮箱格式不正确";
  }

  if (!values.password) {
    error.password = "密码不能为空";
  } else if (!password_pattern.test(values.password)) {
    error.password = "密码格式不正确，需包含大小写字母、数字且长度不少于8位";
  }
  
  return error;
}

export default Validation;

4. 初始化错误状态为对象 #

原代码错误地将错误初始状态设为数组，改为对象类型：

const [errors, setErrors] = useState({});

内容的提问来源于stack exchange，提问作者bhuvana