确认密码不会显示错误消息，以防密码不匹配

Question

我正在用React构建一个应用程序，我的问题是关于[![1]][1]注册用户。我试图在确认密码与密码不相同时显示消息错误。来自console.log的问题消息是清楚的，错误来自我的innerHTML。我找不到解决办法，所以我向别人求助。

import axios from "axios";
const SignUpForm = () => {
// 1- on met se qu'on se stock
const [pseudo, setPseudo] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [controlPassword, setControlPassword] = useState("");
// const [email, setEmail] = useState("");
// const [paswword, setPassword] = useState("");
// 2- la logique
const handleRegister = async (e) => {
e.preventDefault();
const terms = document.querySelector(".terms"); //pk on mmet terms
const termsError = document.querySelector(".terms.error");
const pseudoError = document.querySelector("pseudo.error");
const emailError = document.querySelector("email.error");
const passwordError = document.querySelector("password.error");
const passwordConfirmError = document.querySelector(
"password-confirm.error"
);
if (password !== controlPassword || !terms.checked) {
if (password !== controlPassword) {
passwordConfirmError.innerHTML =
"Les mots de passe ne correspondent pas";
}
if (!terms.checked) {
termsError.innerHTML = "Veuillez valider les conditions générales";
}
}
};
// 3- renvoie le jsx (html)
return (
<form action="" onSubmit={handleRegister} id="sign-up-form">
{/* Pseudo  */}
<label htmlFor="pseudo">Pseudo</label>
<br />
<input
type="text"
name="pseudo"
id="pseudo"
// ce onChange ca permet de recuperer ce qui est taper dans input et d'incrementer la valeur dans Pseudo
onChange={(e) => setPseudo(e.target.value)}
value={pseudo}
/>
<div className="pseudo error"></div>
<br />
{/* email  */}
<label htmlFor="email">Email</label>
<br />
<input
type="text"
name="email"
id="email"
onChange={(e) => setEmail(e.target.value)}
value={email}
/>
<div className="email error"></div>
<br />
{/* mot de passe  */}
<label htmlFor="password">Mot de passe</label>
<br />
<input
type="password"
name="password"
id="password"
onChange={(e) => setPassword(e.target.value)}
value={password}
/>
<div className="password error"></div>
<br />
{/* mot de passe  confirmation */}
<label htmlFor="password-confirm">Confirmer mot de passe</label>
<br />
<input
type="password"
name="password-confirm"
id="password-confirm"
onChange={(e) => setControlPassword(e.target.value)}
value={controlPassword}
/>
<div className="password-confirm error"></div>
<br />
{/* terms checkbox */}
<input type="checkbox" id="terms" />
<label htmlFor="terms">
J'accepte les{" "}
<a href="/" target="_blnk" rel="noopener noreferer">
conditions generales
</a>
</label>
<div className="terms error"></div>
<input type="submit" value="Valider l'inscription" />
</form>
);
};
export default SignUpForm;```

[1]: https://i.stack.imgur.com/WkVGC.png

Answer 1

按类选择时，需要在类名前加一个点。例如，在这个代码块中，您没有这样做:

const pseudoError = document.querySelector("pseudo.error");
const emailError = document.querySelector("email.error");
const passwordError = document.querySelector("password.error");
const passwordConfirmError = document.querySelector(
"password-confirm.error"
);

应该是这样的:

const pseudoError = document.querySelector(".pseudo.error");
const emailError = document.querySelector(".email.error");
const passwordError = document.querySelector(".password.error");
const passwordConfirmError = document.querySelector(
".password-confirm.error"
);

顺便说一下，我建议使用状态而不是操作DOM。

Answer 2

正如user456所说，我忘记在类名前加一个点。我的代码工作