HTML模式即使使用正确的正则表达式也无法工作

Question

正则表达式: ((?=.*\d)(?=.*[A-Z]))

输入字符串: qwer1Q

如果您在regex101中检查上述输入字符串，则会通过验证。

但是，如果您将正则表达式包含在html中的pattern属性中，并尝试再次验证相同的字符串，则不会通过：

<form>
  <div>
    <input type="text" placeholder="Password" 
      pattern="((?=.*\d)(?=.*[A-Z]))">
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

- Bavi Gurunath

Answer 1

你需要确保模式与整个字符串匹配（并消耗）, 因为 HTML5 pattern 正则表达式默认是锚定的。

<form>
  <div>
    <input type="text" placeholder="Password" 
      pattern="(?=.*\d)(?=.*[A-Z]).*">
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

"

(?=.*\d)(?=.*[A-Z]).*模式将被转换为^(?:(?=.*\d)(?=.*[A-Z]).*)$，它将匹配：

• ^ - 字符串的开头
• (?: - 开始一个非捕获组：
  • (?=.*\d) - 正向先行断言检查是否至少有1个数字
  • (?=.*[A-Z]) - 正向先行断言检查是否至少有1个大写字母
  • .* - 任意0+个字符，贪婪地匹配到字符串的结尾
• ) - 非捕获组的结束
• $ - 字符串的结尾。

"

- Wiktor Stribiżew

---

重要提示：需要澄清的是，该模式必须捕获整个输入，而不仅仅是匹配它。这就是为什么你需要使用“.*”。 - Ciabaros

@Ciabaros 这里不是捕获，而是消费。要进行捕获，您需要使用捕获组，在这里没有任何捕获组。 - Wiktor Stribiżew

我的模式非常简单：[A-Za-z]{2,30}没有斜杠，量词足够了，对吧？它具有“required”属性，但输入字段仍然接受像1、2、3、@＃$%^这样的字符...我的意思是它们被验证通过了，为什么？这在我的本地环境中发生。我使用Dreamweaver，并且在编码时也使用Brackets进行测试。一个注意点：我正在使用本地服务器。我的HTML联系表单保存为php。这是否与客户端验证问题有关？ - limakid

@limakid 请阅读pattern属性文档。那里的正则表达式不限制用户输入，验证发生在提交时。如果您没有提供额外的编码，您可以在那里输入任何内容。 - Wiktor Stribiżew