React密码提交验证

Question

我正在为我的应用程序使用React typescript。对于样式，我使用了样式组件。我创建了一个全局输入组件，其中类型为text和password。我做了几个表格验证。我的电子邮件验证和密码确认验证工作正常。我已经进行了一次密码长度验证，当用户输入时，它会显示password is too small为错误。我的逻辑工作正常，但当我点击提交按钮少于8个字符时，它仍然可以接受表单。我不知道如何防止在表单少于8个字符时提交表单。

我在Codesandbox中共享我的代码。

这是表单组件

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 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) => {
let passwordError = "";
if (e.target.id === "password" && password.length < 7) {
passwordError = "Password is too short";
}
setFormState({
...formState,
[e.target.id]: e.target.value,
passwordLength: passwordError //In here it display the error
});
};
const onSubmit = async (e: any) => {
e.preventDefault();
setFormState({
...formState,
errorPasswordMessage: isPasswordValid(password, passwordConfirmation)
? ``
: `Upps sorry Password did not match 😔`,
errorEmailMessage: isEmailValid(email) ? `` : `Upps sorry wrong email  😔`
});
if (
!isPasswordValid(formState.password, formState.passwordConfirmation) ||
!isEmailValid(formState.email)
) {
return;
}
const response = await sendForm({
email: formState.email,
password: formState.password
});
if (response.ok) {
setFormState({
...formState,
accountCreationSuccessful: true,
email: ``,
password: ``,
passwordConfirmation: ``
});
}
};
return (
<div>
<TextInput
type="text"
value={email}
onChange={handleChange}
id="email"
label="Email"
required
error={errorEmailMessage}
/>
<TextInput
type="password"
value={password}
onChange={handleChange}
id="password"
required
label="password"
isPassword
error={passwordLength} //Password lenght error
/>
<TextInput
type="password"
value={passwordConfirmation}
onChange={handleChange}
id="passwordConfirmation"
required
label="Confirm password"
isPassword
error={errorPasswordMessage}
/>
<button
type="submit"
name="action"
onClick={onSubmit}
disabled={!formState.email}
>
{loading ? `loading...` : `save`}
</button>
{accountCreationSuccessful && !loading ? (
<p>You have succefully create and account 👏🏾</p>
) : null}
</div>
);
}

Answer 1

我在沙箱上浏览了您的代码。您可以添加一个已禁用的附加签入。

App.tsx

<button
type="submit"
name="action"
onClick={onSubmit}
disabled={!formState.email || formState.password.length < 8}
>