如何修改密码验证表单的HTML pattern，强制要求含特殊字符（含下划线）

问题背景 #

用JavaScript实现密码验证，当前能实时检测特殊字符并显示状态，但HTML的pattern属性无法强制用户输入特殊字符。尝试过(?=.*\W)(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}，但该正则不支持下划线，需要调整规则或其他实现方式。

解决方案 #

方案1：修改HTML的pattern正则表达式 #

\W匹配的是非单词字符（即排除字母、数字、下划线），要包含下划线，只需把下划线加入正向预查的匹配集合中：

推荐使用以下pattern：

pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[_\W]).{8,}"

• [_\W]表示匹配下划线或者任何非单词字符，完美覆盖你需要的特殊字符范围（包括空格）。
• 若想和前端实时验证规则完全一致，也可以直接用JavaScript中定义的特殊字符集作为预查条件：

pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[ `!@#$%^&*()_+\-=\[\]{};':\"\\|,.<>\/?~]).{8,}"

方案2：纯JavaScript增强验证（避免表单提交绕过） #

HTML的pattern仅在表单提交时触发验证，若想在输入过程中就强制拦截不符合要求的提交，可以给表单添加提交事件监听，手动校验所有规则。

修改后的完整代码 #

HTML代码 #

<form id="password-form">
  <input type="password" name="password" placeholder="Password" id="password" required minlength="8" maxlength="32" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[_\W]).{8,}">
  <button type="submit">提交</button>
</form>

<div id="message">
  <div style="padding-top:8px;"></div>
  <h2 style="padding-left:40px;font-size:19px;text-decoration:underline;font-weight:650;color:#333;">密码要求：</h2>
  <p id="letter" class="invalid"><span style="font-weight:600;font-size:17px;">包含小写字母</span></p>
  <p id="capital" class="invalid"><span style="font-weight:600;font-size:17px;">包含大写字母</span></p>
  <p id="number" class="invalid"><span style="font-weight:600;font-size:17px;">包含数字</span></p>
  <p id="special" class="invalid"><span style="font-weight:600;font-size:17px;">包含特殊字符（含下划线）</span></p>
  <p id="length" class="invalid"><span style="font-weight:600;font-size:17px;">至少8个字符</span></p>
</div>

JavaScript代码（含实时验证+提交拦截） #

var myInput = document.getElementById("password");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
var length = document.getElementById("length");
var special = document.getElementById("special");

// 聚焦显示提示框
myInput.onfocus = function() {
    document.getElementById("message").style.display = "block";
}

// 失焦隐藏提示框
myInput.onblur = function() {
    document.getElementById("message").style.display = "none";
}

// 实时验证密码规则
myInput.onkeyup = function() {
    // 小写字母验证
    const hasLower = /[a-z]/.test(myInput.value);
    letter.classList.toggle("valid", hasLower);
    letter.classList.toggle("invalid", !hasLower);

    // 大写字母验证
    const hasUpper = /[A-Z]/.test(myInput.value);
    capital.classList.toggle("valid", hasUpper);
    capital.classList.toggle("invalid", !hasUpper);

    // 数字验证
    const hasNumber = /\d/.test(myInput.value);
    number.classList.toggle("valid", hasNumber);
    number.classList.toggle("invalid", !hasNumber);

    // 长度验证
    const hasLength = myInput.value.length >= 8;
    length.classList.toggle("valid", hasLength);
    length.classList.toggle("invalid", !hasLength);

    // 特殊字符验证（包含下划线）
    const hasSpecial = /[ `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/.test(myInput.value);
    special.classList.toggle("valid", hasSpecial);
    special.classList.toggle("invalid", !hasSpecial);
}

// 表单提交时强制校验所有规则
document.getElementById('password-form').addEventListener('submit', function(e) {
    const password = myInput.value;
    const hasLower = /[a-z]/.test(password);
    const hasUpper = /[A-Z]/.test(password);
    const hasNumber = /\d/.test(password);
    const hasSpecial = /[ `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/.test(password);
    const hasLength = password.length >= 8;

    if (!hasLower || !hasUpper || !hasNumber || !hasSpecial || !hasLength) {
        e.preventDefault(); // 阻止表单提交
        alert('请满足所有密码要求');
        
        // 重新标记未通过的验证项
        letter.classList.toggle("valid", hasLower);
        letter.classList.toggle("invalid", !hasLower);
        capital.classList.toggle("valid", hasUpper);
        capital.classList.toggle("invalid", !hasUpper);
        number.classList.toggle("valid", hasNumber);
        number.classList.toggle("invalid", !hasNumber);
        special.classList.toggle("valid", hasSpecial);
        special.classList.toggle("invalid", !hasSpecial);
        length.classList.toggle("valid", hasLength);
        length.classList.toggle("invalid", !hasLength);
        
        // 显示提示框
        document.getElementById("message").style.display = "block";
    }
});

CSS代码（无需修改） #

#message {
display:none;
background: #EFEFEF;
color: #000;
position: relative;
margin-top: 0px;
text-align:left;
width:100%;
}
#message p {
padding: 2px 35px 2px 60px;
font-size: 18px;
}
/* 验证通过样式 */
.valid {
color: green;
}
.valid:before {
position: relative;
left: -20px;
content: "✔";
}
/* 验证失败样式 */
.invalid {
color: red;
}
.invalid:before {
position: relative;
left: -20px;
content: "✖";
color: red;
}

内容的提问来源于stack exchange，提问作者Antarctica-UFO