Reactjs 更改密码时响应密码验证

我正在为我的应用程序使用React-typescript。我已经创建了一个全局输入组件，可以在其中导入到任何组件。我已经用

电子邮件

和

密码

验证创建了一个表单。对于电子邮件验证，我使用了Regex，它运行良好。我的密码和确认密码验证工作正常。现在我已经决定，如果用户输入少于8个字符，我将捕获错误。为此，我使用了正则表达式。这种逻辑也适用。我想在用户键入密码时在handleChange函数中显示密码长度，直到他们键入的字符不超过8个，我将显示错误。提交表单后，将显示两个输入字段密码不匹配。但是，当我可以在句柄更改中添加错误时，我无法找到逻辑。 我在中共享我的代码

这是我的表单验证代码

import React, { useState } from "react";
import "./styles.css";
import { TextInput } from "./input";

export default function App() {
  const [formState, setFormState] = useState({
    email: ``,
    password: ``,
    passwordConfirmation: ``,
    loading: false,
    accountCreationSuccessful: false,
    errorPasswordMessage: ``,
    errorEmailMessage: ``,
    passwordLength: ``
  });

  //destructure the state
  const {
    email,
    password,
    passwordConfirmation,
    loading,
    accountCreationSuccessful,
    errorPasswordMessage,
    errorEmailMessage,
    passwordLength
  } = formState;

  const isPasswordValid = (password: any, passwordConfirmation: any) => {
    if (!password || !passwordConfirmation) return false;
    return password === passwordConfirmation;
  };

  const isEmailValid = (value: any) => {
    const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return emailRegex.test(value);
  };

  const passLengthValidation = (value: any) => {
    const re = new RegExp(`^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,32}$`);
    return re.test(value);
  };

  const sendForm = (payload: any) => {
    return fetch(
      "https://run.mocky.io/v3/03659a5b-fed5-4c5f-b8d0-4b277e902ed3",
      {
        method: `POST`,
        headers: {
          Accept: `application/json`,
          "Content-Type": `application/json`
        },
        body: JSON.stringify(payload)
      }
    );
  };

  const handleChange = (e: any) => {
    setFormState({
      ...formState,
      [e.target.id]: e.target.value
    });
    //In here I want to display the error.when user will type short password
  };

  const onSubmit = async (e: any) => {
    e.preventDefault();

    setFormState({
      ...formState,
      errorPasswordMessage: isPasswordValid(password, passwordConfirmation)
        ? ``
        : `Upps sorry Password did not match You could check the id for 
password
 field and check 
e.target.value
 for password value and show error message accordingly.

const handleChange = (e: any) => {
    let passwordError = ''
    
    if (e.target.id === 'password' && password.length < 7) {
      passwordError = 'Password should be more than 8 characters'
    }
    
    setFormState({
      ...formState,
      [e.target.id]: e.target.value,
      errorPasswordMessage: passwordError
    });
    //In here I want to display the error.when user will type short password
  };

import React，{useState}来自“React”；
导入“/styles.css”；
从“/input”导入{TextInput}；
导出默认函数App（）{
常量[formState，setFormState]=useState({
电子邮件：``，
密码：``，
密码确认：``，
加载：false，
accountCreationSuccessful:false，
errorPasswordMessage:``，
errorEmailMessage:``，
密码长度：``
});
//解构状态
常数{
电子邮件，
密码，
密码确认，
加载，
账户创建成功，
errorPasswordMessage，
错误电子邮件，
密码长度
}=formState；
常量isPasswordValid=（密码：任意，密码确认：任意）=>{
如果（！password | |！passwordConfirmation）返回false；
返回密码===密码确认；
};
常量isEmailValid=（值：any）=>{
const emailRegex=/^（[^（）\[\]\\，；：\s@“]+（\.[^（）\[\]\，；：\s@“]+）*（“+”）（（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}]））{124；（[a-zA Z-0-9]+-zA 0-9]-[a-2]/]；
返回emailRegex.test（值）；
};
const passLengthValidation=（值：any）=>{
const re=new RegExp（`^（？=.*\d）（？=.[a-z]）（？=.[a-z]）。{8,32}$`）；
返回重新测试（值）；
};
const sendForm=（有效负载：任意）=>{
回传(
"https://run.mocky.io/v3/03659a5b-fed5-4c5f-b8d0-4b277e902ed3",
{
方法：`POST`，
标题：{
接受：`application/json`，
“内容类型”：`application/json`
},
正文：JSON.stringify（有效负载）
}
);
};
常量handleChange=（e:any）=>{
setFormState({
…formState，
[e.target.id]：e.target.value
});
//在这里我想显示错误。当用户将键入短密码
};
const onSubmit=async（e:any）=>{
e、 预防默认值（）；
setFormState({
…formState，
errorPasswordMessage:isPasswordValid（密码、密码确认）
? ``
：`Upps sorry Password不匹配您可以检查
Password
字段的id，检查
e.target.value
的密码值，并相应显示错误消息

const handleChange=（e:any）=>{
让passwordError=“”
如果（e.target.id=='password'&&password.length<7）{
passwordError='密码应超过8个字符'
}
setFormState({
…formState，
[e.target.id]：e.target.value，
errorPasswordMessage:passwordError
});
//在这里我想显示错误。当用户将键入短密码
};
当我键入以下内容时，它不会显示：（我想当用户开始输入时，它会显示
密码太短
，你明白我的意思吗：D.提交后没有。因此，你的逻辑不起作用，如果我输入的字符超过8个，仍然抛出错误。你是否正确检查了它？->只是有奇怪的问题，即使我发现了错误，但如果确认，我仍然能够提交表单。）剑是一样的