1

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

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

对于诸如“1aA”之类的测试字符串，这将评估为真。

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

为什么输入的 patternMismatch 验证与正则表达式测试不同？

在下面的代码片段中，将根据正则表达式测试的结果切换具有关联背景颜色的类。根据 MDN 文档，根据patternMismatch ，无效的伪类应该为真。

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])">

4

1 回答 1

2

你需要设置最小字符，然后检查它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">

于 2021-02-02T15:49:51.770 回答