我使用 react.js/bootstrap 创建了一个登录/注册表单,注册表单中有 4 个输入。一个用于用户名,一个用于电子邮件,还有 2 个用于密码(1 个用于密码,1 个用于确认)...
我使用 react.js/bootstrap 创建了一个登录/注册表单,注册表单中有 4 个输入。一个用于用户名,一个用于电子邮件,还有两个用于密码(1 个用于密码,1 个用于确认),如果两个密码不匹配,我想显示一条消息,例如密码不匹配。
在检查了 2 个密码输入后,我尝试添加无效反馈 boostrap 类,但它没有按预期工作这是我正在使用的代码:
function handleSubmit(e) {
e.preventDefault();
const form = e.target;
passwordChecker();
if (form.checkValidity()) {
handleLoginClick();
reset();
console.log("Form submitted successfully");
} else {
form.classList.add('was-validated');
}
}
function passwordChecker(){
const confirmPasswordField = document.querySelector("#invalidpassword1");
if (isRegistering && password !== checkPassword) {
form.classList.add('was-validated');
confirmPasswordField.classList.add("invalid-feedback");
console.log("passwords dont match")
} else {
confirmPasswordField.classList.remove("invalid-feedback");
console.log("passwords match")
}
}
<div className="form-floating mb-3">
<input
type="password"
className="form-control"
id="registerPassword"
placeholder="Enter your password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
<label htmlFor="registerPassword">Password</label>
<div className='invalid-feedback' id='invalidpassword2'>Please fill out this field</div>
<div className="form-floating mb-3">
<input
type="password"
className="form-control"
id="confirmPassword"
placeholder="Confirm your password"
value={checkPassword}
onChange={(e) => setCheckPassword(e.target.value)}
required
/>
<label htmlFor="confirmPassword">Confirm Password</label>
<div id='invalidpassword1'>Passwords do not match</div>
</div>
我尝试过的新代码
<div id='invalidpassword1' className='invalid-feedback'>{checkPassword==='' ? 'Please fill out this field' : 'Passwords do not much'}</div>
现在弹出了正确的消息,但公式仍然不起作用,当密码不匹配时,它会显示正确的
设置自定义 Bootstrap 无效/有效消息
下载声明:
本站所有软件和资料均为软件作者提供或网友推荐发布而来,仅供学习和研究使用,不得用于任何商业用途。如本站不慎侵犯你的版权请联系我,我将及时处理,并撤下相关内容!