输入类型密码有效性模式不匹配状态与正则表达式测试结果不同

Question

我有一个正则表达式来检查一个字符串是否至少包含一位数字、一位小写字母和一位大写字母。

(?=.*\d)(?=.*[a-z])(?=.*[A-Z])

使用诸如“1aA”之类的测试字符串计算结果为真。

但是，patternMismatch 的有效性状态的评估方式与对输入元素值的正则表达式测试的评估方式不同。

输入的 patternMismatch 会验证与正则表达式测试不同的原因吗？

在下面的代码片段中，将根据正则表达式测试的结果切换具有相关背景颜色的 class。根据 patternMismatch according to the MDN docs.

，无效伪 class 应该为真

const password = document.getElementById("auth_user_password");

password.addEventListener("input", check);

function check() {
  /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])/.test(password.value)
    ? password.classList.add("valid")
    : password.classList.remove("valid");
}

:focus {
  outline: none;
}

input:invalid {
  border: 3px solid red;
}

.valid {
  background-color: green;
}

<input id="auth_user_password" type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])">

Answer 1

你需要设置最小字符数，然后用element.validity.valid检查一下

const password = document.getElementById("auth_user_password");

password.addEventListener("input", check);

function check() {
  password.validity.valid ?
    password.classList.add("valid") :
    password.classList.remove("valid");
}

input:invalid {border: 3px solid red;}
.valid {background-color: green;}

<input id="auth_user_password" name="password" type="text" autocomplete="off" pattern="(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])[a-zA-Z0-9]{6,}" value="" placeholder="min 6 chars">

输入类型密码有效性模式不匹配状态与正则表达式测试结果不同

Input type password validity patternMismatch status is different to regex test result

html

javascript

regex

input

checkvalidity