如何实现密码输入框前端验证：失焦标记未满足规则，输入时恢复

针对你的密码输入框验证需求，我整理了修改后的代码并说明关键调整点，解决原代码里的逻辑冲突和规则不一致问题：

修改后的完整代码 #

HTML #

<div class="data-form nenp">
  <label for="password">Password</label>
  <div class="password">
    <input type="password" id="password" autocomplete="off" required>
    <div class="visibility">
      <a>eye</a>
    </div>
  </div>
  <span class="error-message">required</span>
  <div class="password-rules">
    <span class="rule-item">Minimum 6 characters</span>
    <span class="rule-item">Must include an Uppercase and number</span>
  </div>
</div>

CSS #

.error-message {
  position: relative;
  color: rgb(251, 70, 34);
  margin-top: -27px;
  margin-left: 14px;
  display: none;
}

.password-rules {
  margin-top: -10px;
  display: grid;
}

.rule-item {
  color: #333;
  transition: color 0.2s;
}

.rule-item.invalid {
  color: red;
}

JavaScript #

// 通用输入框验证（保留原逻辑，不影响密码框）
const inputFields = document.querySelectorAll('.common-input-class');
inputFields.forEach(function(inputField) {
  const errorMessage = inputField.parentElement.querySelector('.error-message');
  let hasError = false;

  inputField.addEventListener('blur', function() {
    if (inputField.value.trim() === '') {
      inputField.style.border = '1.7px solid red';
      errorMessage.style.display = 'block';
      hasError = true;
    } else {
      inputField.style.border = '1.2px solid #ccc';
      errorMessage.style.display = 'none';
      hasError = false;
    }
  });

  inputField.addEventListener('input', function() {
    if (hasError) {
      inputField.style.border = '1.7px solid red';
      errorMessage.style.display = 'block';
    } else {
      inputField.style.border = '1.2px solid #ccc';
      errorMessage.style.display = 'none';
    }
  });
});

// 密码框验证逻辑
const passwordInput = document.getElementById('password');
const passwordErrorMessage = document.querySelector('.nenp .error-message');
const ruleItems = document.querySelectorAll('.password-rules .rule-item');
const [lengthRule, charRule] = ruleItems;
let passwordHasError = false;

// 统一规则检查函数
function checkPasswordRules(value) {
  const trimmedValue = value.trim();
  let hasInvalidRule = false;

  // 匹配HTML里的「最少6字符」规则
  if (trimmedValue.length < 6) {
    lengthRule.classList.add('invalid');
    hasInvalidRule = true;
  } else {
    lengthRule.classList.remove('invalid');
  }

  // 检查「大写字母+数字」规则
  if (!/[A-Z]/.test(trimmedValue) || !/\d/.test(trimmedValue)) {
    charRule.classList.add('invalid');
    hasInvalidRule = true;
  } else {
    charRule.classList.remove('invalid');
  }

  return hasInvalidRule;
}

// 失焦时触发规则检查并高亮未满足项
passwordInput.addEventListener('blur', function() {
  const trimmedValue = passwordInput.value.trim();
  const passwordContainer = passwordInput.closest('.password');

  if (trimmedValue === '') {
    passwordContainer.style.border = '1.7px solid red';
    passwordErrorMessage.style.display = 'block';
    passwordHasError = true;
  } else {
    passwordHasError = checkPasswordRules(trimmedValue);
    passwordContainer.style.border = passwordHasError ? '1.7px solid red' : '1.2px solid #ccc';
    passwordErrorMessage.style.display = 'none';
  }
});

// 输入时实时更新规则状态
passwordInput.addEventListener('input', function() {
  const trimmedValue = passwordInput.value.trim();
  const passwordContainer = passwordInput.closest('.password');

  if (trimmedValue === '') {
    ruleItems.forEach(item => item.classList.remove('invalid'));
    passwordContainer.style.border = '1.2px solid #ccc';
    passwordErrorMessage.style.display = 'none';
    passwordHasError = false;
  } else {
    passwordHasError = checkPasswordRules(trimmedValue);
    passwordContainer.style.border = passwordHasError ? '1.7px solid red' : '1.2px solid #ccc';
    passwordErrorMessage.style.display = 'none';
  }
});

关键调整说明 #

• 统一规则检查逻辑：把规则判断抽成独立函数，避免重复代码，后续修改规则只需改这一处。
• 用CSS类控制样式：新增.invalid类标记未满足的规则，比直接修改style更易维护，还能加过渡动画提升体验。
• 修复规则不一致问题：把JS里的长度判断从<8改成<6，和HTML提示文字统一。
• 移除重复事件绑定：原代码绑定了两次blur事件，现在合并成一个，避免逻辑冲突。
• 优化错误状态判断：passwordHasError由所有规则的结果共同决定，不再被单个规则覆盖。
• 精准DOM选择：给规则span加.rule-item类，直接定位元素，不用遍历父级，更高效。
• 实时输入反馈：输入过程中就更新规则状态，空值时自动重置所有样式，用户体验更流畅。

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