如何在Oracle APEX中实现类似W3Schools的密码检查器？

步骤1：配置验证区域 #

确保你已添加的密码验证区域设置了静态ID（比如password-validation），方便后续JS定位。

步骤2：添加验证项HTML #

在验证区域的“源”中，输入以下HTML内容，定义需要检查的密码规则项：

<p id="letter" class="invalid">包含至少一个<strong>小写字母</strong></p>
<p id="capital" class="invalid">包含至少一个<strong>大写字母</strong></p>
<p id="number" class="invalid">包含至少一个<strong>数字</strong></p>
<p id="length" class="invalid">长度至少<strong>8个字符</strong></p>

步骤3：添加状态样式 #

在页面的“内联CSS”中添加以下样式，控制验证项的有效/无效状态显示：

#password-validation p {
  margin: 4px 0;
}
.invalid {
  color: #dc3545;
}
.valid {
  color: #28a745;
}
.valid:before {
  content: "✓ ";
}
.invalid:before {
  content: "✗ ";
}

步骤4：编写输入监听逻辑 #

在页面的“执行当页面加载时”JavaScript中添加以下代码（替换P1_NEW_PASSWORD为你的密码字段静态ID）：

document.addEventListener('DOMContentLoaded', function() {
  const passwordInput = document.getElementById('P1_NEW_PASSWORD');
  const letter = document.getElementById('letter');
  const capital = document.getElementById('capital');
  const number = document.getElementById('number');
  const length = document.getElementById('length');

  // 监听密码输入变化，实时更新验证状态
  passwordInput.addEventListener('input', function() {
    // 检查小写字母
    const hasLower = /[a-z]/g.test(passwordInput.value);
    toggleValidationState(letter, hasLower);

    // 检查大写字母
    const hasUpper = /[A-Z]/g.test(passwordInput.value);
    toggleValidationState(capital, hasUpper);

    // 检查数字
    const hasNumber = /[0-9]/g.test(passwordInput.value);
    toggleValidationState(number, hasNumber);

    // 检查长度
    const hasValidLength = passwordInput.value.length >= 8;
    toggleValidationState(length, hasValidLength);
  });

  // 封装状态切换函数
  function toggleValidationState(element, isValid) {
    if (isValid) {
      element.classList.remove('invalid');
      element.classList.add('valid');
    } else {
      element.classList.remove('valid');
      element.classList.add('invalid');
    }
  }
});

步骤5：表单提交前的最终验证 #

为了防止用户跳过验证直接提交，添加一个动态行动：

• 触发条件：表单提交按钮（或提交事件）
• 动作：执行JavaScript代码

const isLetterValid = document.getElementById('letter').classList.contains('valid');
const isCapitalValid = document.getElementById('capital').classList.contains('valid');
const isNumberValid = document.getElementById('number').classList.contains('valid');
const isLengthValid = document.getElementById('length').classList.contains('valid');

if (!isLetterValid || !isCapitalValid || !isNumberValid || !isLengthValid) {
  apex.message.showErrors([{
    type: "error",
    location: ["page"],
    message: "密码未满足强度要求，请检查所有验证项",
    unsafe: false
  }]);
  return false; // 阻止表单提交
}

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