注册表单密码输入框实时校验颜色切换问题求助

问题根源 #

你的代码存在以下几个关键问题导致需求无法实现：

• 密码输入框初始样式未设置为红色边框
• 变量password仅在页面加载时获取一次值，后续输入不会更新，导致校验逻辑失效
• 判断规则是否全部满足时，valid未加引号，导致引用未定义变量报错
• 仅在满足所有规则时切换绿色边框，未处理规则不满足时切回红色的逻辑
• passwordFieldValidations在每次聚焦时重复绑定事件，可能引发多次执行

修正方案 #

1. 设置初始红色边框：给密码输入框初始添加invalid类，调整input默认边框样式让颜色变化更明显
2. 动态获取输入值：移除提前获取的password变量，每次校验直接使用passwordField.value
3. 修复字符串引用错误：将classList.contains(valid)改为classList.contains('valid')
4. 补充反向校验逻辑：当任意规则不满足时，将边框切回红色并添加invalid类
5. 避免重复绑定事件：页面加载时直接绑定事件，而非通过onfocus重复触发

修正后完整代码 #

HTML

<div id="wrapper">
  <div id="content">
    <div id="signup-info">
      <form name="signup-form" id="signup-form" action="#" method="post">
        <div>
          <label for="password">Password:</label>
          <!-- 初始添加invalid类 -->
          <input type="password" name="password" id="password" placeholder="Enter a password" 
                 pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" 
                 title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required class="invalid">
        </div>
        <div>
          <label for="confirm_password">Confirm Password:</label>
          <input type="password" name="confirm_password" id="confirm_password" placeholder="Retype password" 
                 title="Password must match" required>
        </div>
        <button type="submit" id="submit-form">Create account</button>
        <div id="message">
          <h3>Password must contain the following:</h3>
          <p id="letter" class="invalid">A <b>lowercase</b> letter</p>
          <p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
          <p id="number" class="invalid">A <b>number</b></p>
          <p id="length" class="invalid">Minimum <b>8 characters</b></p>
        </div>
      </form>
    </div>
  </div>
</div>

CSS

body { margin: 0; padding: 0; }

h1, h2 { font-family: 'Poppins', sans-serif; color: #fff; }

p, label, button { font-family: Roboto, sans-serif; }

#wrapper { width: 1200px; margin: 0 auto; }

#content { background-color: #272224; height: 600px; padding: 20px 0 0; }

#signup-info { margin: 0 auto; }

#signup-form { width: 400px; margin: 0 auto; }

#signup-info h2 img { width: 40px; vertical-align: middle; }

#signup-info h1 { margin-bottom: 0; }

.no-top-margin { margin-top: 0; }

#signup-info p { color: #FFE4CF; }

label { display: block; color: #fff; font-weight: bold; }

input { 
  margin-bottom: 15px; 
  border: none; 
  border-bottom: 1px solid #555; 
  background-color: transparent; 
  padding: 10px 0; 
  width: 100%;
  color: #FFE4CF; 
  font-weight: bold;
  /* 边框颜色过渡动画，提升交互体验 */
  transition: border-color 0.2s ease;
}

::placeholder { font-weight: normal; }

button { border: none; background-color: #FFE4CF; width: 100%; padding: 15px; font-weight: bold; }

#signup-info a { color: #fff; }

input.valid { 
  border-bottom-color: green;
  background-image: url(images/check.png); 
  background-position: right; 
  background-size: 10%; 
  background-repeat: no-repeat; 
}

input.invalid { 
  border-bottom-color: red;
  background-image: url(images/cross.png); 
  background-position: right;
  background-size: 10%; 
  background-repeat: no-repeat; 
}

#message p { margin: 5px 0 5px 40px; }

#message h3 { margin: 0 0 5px 0; }

#message .valid { color: green; }

#message .valid:before { position: relative; left: -35px; content: "✔"; }
  
/* 规则不满足时的红色提示样式 */
#message .invalid { color: red; }
  
#message .invalid:before { position: relative; left: -35px; content: "✖"; }

#message { display: none; background-color: #fff; padding: 10px; }

input.valid:focus { outline: none !important; border-bottom:1px solid green; }

::-ms-reveal { filter: invert(100%); }

JavaScript

const form = document.getElementById("signup-form");
const passwordField = document.getElementById('password');
const confirmPasswordField = document.getElementById('confirm_password');

// 页面加载时初始化密码框校验事件
function initPasswordValidations() {
  const letter = document.getElementById("letter");
  const capital = document.getElementById("capital");
  const number = document.getElementById("number");
  const length = document.getElementById("length");
  const messageBox = document.getElementById("message");

  // 点击密码框显示提示
  passwordField.addEventListener('click', () => {
    messageBox.style.display = "block";
  });

  // 离开密码框隐藏提示
  passwordField.addEventListener('blur', () => {
    messageBox.style.display = "none";
  });

  // 输入时实时校验
  passwordField.addEventListener('keyup', () => {
    const passwordValue = passwordField.value;

    // 校验小写字母
    const hasLower = /[a-z]/.test(passwordValue);
    toggleValidationClass(letter, hasLower);

    // 校验大写字母
    const hasUpper = /[A-Z]/.test(passwordValue);
    toggleValidationClass(capital, hasUpper);

    // 校验数字
    const hasNumber = /[0-9]/.test(passwordValue);
    toggleValidationClass(number, hasNumber);

    // 校验长度
    const hasValidLength = passwordValue.length >= 8;
    toggleValidationClass(length, hasValidLength);

    // 校验所有规则是否满足
    const allValid = hasLower && hasUpper && hasNumber && hasValidLength;
    toggleFieldValidClass(passwordField, allValid);
  });
}

// 切换规则提示的valid/invalid类
function toggleValidationClass(element, isValid) {
  if (isValid) {
    element.classList.remove("invalid");
    element.classList.add("valid");
  } else {
    element.classList.remove("valid");
    element.classList.add("invalid");
  }
}

// 切换输入框的valid/invalid类及边框颜色
function toggleFieldValidClass(field, isValid) {
  if (isValid) {
    field.classList.remove("invalid");
    field.classList.add("valid");
  } else {
    field.classList.remove("valid");
    field.classList.add("invalid");
  }
}

// 确认密码实时校验
confirmPasswordField.addEventListener('keyup', () => {
  const isMatch = passwordField.value === confirmPasswordField.value;
  toggleFieldValidClass(confirmPasswordField, isMatch);
});

// 表单提交校验
form.addEventListener("submit", (e) => {
  const password1 = passwordField.value;
  const password2 = confirmPasswordField.value;
  
  // 密码无效或不匹配时阻止提交
  const isPasswordValid = passwordField.classList.contains('valid');
  if (!isPasswordValid || password1 !== password2) {
    e.preventDefault();
    // 触发校验更新样式
    passwordField.dispatchEvent(new Event('keyup'));
    toggleFieldValidClass(confirmPasswordField, password1 === password2);
  }
});

// 初始化校验逻辑
initPasswordValidations();

关键改进说明 #

• 初始给密码框添加invalid类，确保页面加载后立即显示红色边框
• 使用addEventListener绑定事件，避免重复绑定导致的多次执行问题
• 提取通用的类切换函数，简化代码逻辑并提升可维护性
• 实时校验时同步处理满足/不满足规则两种情况，确保边框颜色实时正确切换
• 确认密码输入时实时校验匹配状态，同步更新边框样式

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