我的密码表单验证和 JS 验证不起作用

如何解决我的密码表单验证和 JS 验证不起作用

我想在 HTML 格式的表单中验证和验证密码，并在必要时在 Front 中插入警报（“例如，密码不够长”），这将用作网站的“新用户”表单。我想首先了解我对“密码”验证和验证的错误，然后在一切正确后验证表单。

我目前在 HTML 中有以下内容：

<form id="formNouveau">
                <div>
                  <div id="msgPseudo"></div>
                  <label for="pseudo">Pseudo</label>
                  <br>
                  <input type="text" name="pseudo" id="pseudo" required>
                </div>
                <div>
                  <div id="msgEmail"></div>
                  <label for="email">Email</label>
                  <br>
                  <input type="email" name="email" id="email" required>
                </div>
                <div>
                  <div id="msgPass"></div>
                  <label for="password">Mot de passe</label>
                  <br>
                  <input type="password" name="password" id="password" placeholder="*******" required>
                </div>
                <div>
                  <div id="msgPassRep"></div>
                  <label for="passwordRepeat">Repeat your password</label>
                  <br>
                  <input type="password" name="passwordRepeat" id="passwordRepeat" placeholder="*******" required>
                </div>
                <div>
                  <input type="submit" name="submit" id="submit" value="Create an account">
                </div>
              </form>

和JS中的代码，重点是密码验证和验证：

function valideForm(e) {
  e.preventDefault();

  var valPassword = document.getElementById("password").value;

if((valPassword.length < 8)) {
  alert("Password should be at least 8 characters")
}
else if((valPassword.length > 30)) {
  alert("Password should not exceed 30 characters")
}
else if (!/[A-Z]/.test(valPassword)) {
  alert("Password should have at least 1 uppercase")
}
else if (!/[a-z]/.test(valPassword)) {
  alert("Password should have at least 1 lowercase")
}
else if (!/[0-9]/.test(valPassword)) {
 alert("Password should have at least 1 number")
}
else if (!/(?=.[$#%£&§@])/.test(valPassword)) {
  alert("Password should have at least 1 special character")
}
else   {
  alert("Password is correct");
    return false;
}
  
}

document.getElementsByTagName('form')[0].addEventListener('submit',valideForm);

警报消息仅在显示前一个警报时出现，而不是全部出现。 例如，我的密码中将缺少一个大写字母和一个特殊字符，警报只会显示“密码应该至少有 1 个大写字母”。添加大写字母后，其他警报将显示“密码应至少包含 1 个特殊字符。”

你怎么看？

谢谢！

解决方法

您可以将所有验证错误保存在一个数组中，然后在最后提醒用户：

function valideForm(e) {
  e.preventDefault();

  var valPassword = document.getElementById("password").value;
  var errors = [];
if (!valPassword) {
  alert("Password is empty");
}
if((valPassword.length < 8)) {
  errors.push("Password should be at least 8 characters")
}
if((valPassword.length > 30)) {
  errors.push("Password should not exceed 30 characters")
}
if (!/[A-Z]/.test(valPassword)) {
  errors.push("Password should have at least 1 uppercase")
}
if (!/[a-z]/.test(valPassword)) {
  errors.push("Password should have at least 1 lowercase")
}
if (!/[0-9]/.test(valPassword)) {
 errors.push("Password should have at least 1 number")
}
if (!/(?=.[$#%£&§@])/.test(valPassword)) {
  errors.push("Password should have at least 1 special character")
}

  if (errors.length) {
    alert(errors);
  }
}

document.getElementsByTagName('form')[0].addEventListener('submit',valideForm);