JavaScript表单密码验证问题：需包含数字、符号及大小写字母

Hey there! Let's get that password validation working properly for you. You’ve already nailed the basics—length checks, confirm password matching, and those user-friendly popups—so we’ll build right on that foundation to add the missing rules for numbers, symbols, uppercase, and lowercase letters, all while keeping your existing popup style intact.

First, Let’s Outline All Required Validation Rules #

We need to make sure the password meets all these criteria:

• At least 8 characters (you already have this covered!)
• Contains at least one lowercase letter (you mentioned you have a snippet for this—we’ll expand it)
• Contains at least one uppercase letter
• Contains at least one numeric digit
• Contains at least one special symbol (e.g., !@#$%^&*()_+-=[]{}|;:,.<>?)
• Confirm password matches the original password (also already in place)

Full Validation Function with Consistent Popups #

Here’s a complete function that integrates all these checks, using the same alert popup flow you’re already using:

function validatePassword() {
  // Grab password values from your inputs
  const password = document.getElementById('password').value;
  const confirmPassword = document.getElementById('confirm-password').value;

  // Check if confirm password is empty
  if (!confirmPassword) {
    alert('请输入确认密码');
    return false;
  }

  // Check password length
  if (password.length < 8) {
    alert('密码长度不能少于8个字符');
    return false;
  }

  // Check if passwords match
  if (password !== confirmPassword) {
    alert('两次输入的密码不匹配');
    return false;
  }

  // Check for lowercase letters
  const hasLowercase = /[a-z]/.test(password);
  if (!hasLowercase) {
    alert('密码必须包含至少一个小写字母');
    return false;
  }

  // Check for uppercase letters
  const hasUppercase = /[A-Z]/.test(password);
  if (!hasUppercase) {
    alert('密码必须包含至少一个大写字母');
    return false;
  }

  // Check for numbers
  const hasNumber = /\d/.test(password);
  if (!hasNumber) {
    alert('密码必须包含至少一个数字');
    return false;
  }

  // Check for special symbols (adjust the regex character set if you need different symbols)
  const hasSymbol = /[!@#$%^&*()_+\-=\[\]{}|;':",.<>?]/.test(password);
  if (!hasSymbol) {
    alert('密码必须包含至少一个符号（如!@#$%等）');
    return false;
  }

  // All checks passed!
  alert('密码验证通过！');
  return true;
}

Key Notes to Customize This for Your Needs #

• Adjust Symbol Range: If you need to include/exclude specific symbols, modify the character set inside the hasSymbol regex. For example, if you don’t want to allow commas, just remove , from the set.
• Input IDs: Make sure the getElementById calls match the actual IDs of your password input fields.
• Popup Messages: Feel free to tweak the alert text to fit your app’s tone or language—we kept it consistent with the examples you provided.

This function will run each check in sequence, popping up the relevant alert as soon as a rule is violated, just like your existing logic. Once all checks pass, it’ll confirm success with a final popup.

内容的提问来源于stack exchange，提问作者Abbey Moxen