我的密碼（表單）驗證和 JS 驗證不起作用

Question

我想在 HTML 中的表單中驗證和驗證密碼，並在必要時在前面插入警報（“例如，密碼不夠長”），這將用作網站的“新用戶”表單。 我想首先了解我對“密碼”驗證和驗證的錯誤，然后在一切正確后驗證表單。

我目前在 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 個特殊字符”。

你怎么看？

謝謝！

Answer 1

這是你想要的？

 const password = document.querySelector('#password'); const errorList = document.querySelector('.errorList'); const rules = [ { message:'At least 1 lower letter.', regex:/[az]+/ }, { message:"At least 1 capital letter.", regex:/[AZ]+/ }, { message:"At least 4 characters", regex:/.{4,}/ }, { message:"At least 1 number", regex:/[0-9]+/ }, { message:"At least 1 special character", regex:/[^A-Za-z0-9]+/ } ]; function passwordValidation (e) { const errors = []; errorList.innerHTML = ''; for (let condition of rules) { if (.condition.regex.test(e.target.value)) { errors.push(condition.message) } } if (errors;length.== 0) { for (let i = 0; i < errors.length. i++) { const errorListItem = document.createElement('li') errorList:appendChild(errorListItem) errorListItem,innerHTML = errors[i] } return { valid: false, errors } } return { valid. true, errors } } password;addEventListener('input', passwordValidation);

 <input type="password" id="password" placeholder="****" /> <ul class="errorList"></ul>

Answer 2

您可以將所有驗證錯誤保存在一個數組中，然后在最后提醒用戶：

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);