JavaScript客户端密码强度动态验证实践指南

// ...
let passwordStrength = false;

/** 
Regex expression makes sure it has at least 6 characters of which at least one is an uppercase letter, 
one is a lowercase letter, and one is a special character.
*/
let regex = new RegExp('^(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*(),.?":{}|<>])(?=.*[0-9]).{6,}$');

// Checks to make sure password follows requirements
if (regex.test(firstPass.value)) { // 这里的判断只在页面加载时执行一次
  passwordStrength = true;
}
// ...

myButton.onclick = function() {
  if (firstPass.value != secondPass.value) {
    // ... 密码不匹配的错误处理
    return false;
  } else if (passwordStrength === false) { // 使用的是页面加载时的 passwordStrength 值
    // ... 密码强度不足的错误处理
    return false;
  } else {
    // ... 成功处理
    return true;
  }
};

const firstPass = document.querySelector("#firstPass");
const secondPass = document.querySelector("#secondPass");
const errorText = document.querySelector("#error-text");
const myButton = document.querySelector("#button");

/** 
Regex expression makes sure it has at least 6 characters of which at least one is an uppercase letter, 
one is a lowercase letter, and one is a special character.
*/
let regex = new RegExp('^(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*(),.?":{}|<>])(?=.*[0-9]).{6,}$');

// When the button to submit the form is submitted it calls this function.
// If the passwords do not match, it throws up an error message and doesn't allow the submission to go through.
// Otherwise it briefly describes a success message and allows the submission to continue.
myButton.onclick = function() {
  let passwordStrength = false; // 每次点击时重新评估密码强度

  // 检查密码是否符合要求，这里是关键的改动
  if (regex.test(firstPass.value)) {
    passwordStrength = true;
  }

  if (firstPass.value != secondPass.value) {
    errorText.style.display = "block";
    errorText.classList.remove("matched");
    errorText.textContent = "错误！两次输入的密码不匹配！";
    return false;
  } else if (passwordStrength === false) {
    errorText.style.display = "block";
    errorText.classList.remove("matched");
    errorText.textContent = "密码必须至少6个字符长，包含一个特殊字符，以及大小写字母。";
    return false;
  } else {
    errorText.style.display = "block";
    errorText.classList.add("matched");
    errorText.classList.remove("text-danger"); // 移除错误样式
    errorText.textContent = "密码匹配。";
    return true;
  }
};

<form action="protected/register.inc.php" method="post" autocomplete="off">
  <p class="text-center">New Profile:</p>

  <!-- Name input -->
  <div class="form-outline mb-4">
    <input type="text" id="registerName" class="form-control" name="registerName" />
    <label class="form-label" for="registerName">First Name</label>
  </div>

  <!-- Username input -->
  <div class="form-outline mb-4">
    <input type="text" id="registerLastName" class="form-control" name="registerLastName" />
    <label class="form-label" for="registerLastName">Last Name</label>
  </div>

  <!-- Email input -->
  <div class="form-outline mb-4">
    <input type="email" id="registerEmail" class="form-control" name="registerEmail" />
    <label class="form-label" for="registerEmail">Email</label>
  </div>

  <!-- Password input -->
  <div class="form-outline mb-4">
    <input type="password" id="firstPass" class="form-control" name="firstPass" />
    <label class="form-label" for="firstPass">New Password</label>
  </div>

  <div id="error-text" class="text-danger"></div>
  <!-- Confirm password input -->
  <div class="form-outline mb-4">
    <input type="password" id="secondPass" class="form-control" name="secondPass" />
    <label class="form-label" for="secondPass">Repeat Password</label>
  </div>

  <!-- Submit button -->
  <button id="button" type="submit" class="btn btn-primary btn-block mb-3">Register</button>
</form>