HTML5 pattern属性多长度验证规则失效问题求助

嘿，我懂你碰到的麻烦了！你的正则表达式没做好开头和结尾的锚定，再加上可能字符集范围不够，才导致验证没达到预期效果。

为啥原来的代码不行？ #

你现在的代码里，pattern写的是\w{95}|\w{98}|\w{105}，这里有两个核心问题：

• 没锚定整个字符串：虽说HTML5的pattern理论上是匹配整个输入，但实际有些场景下，它会误以为只要字符串里存在一段符合长度的子串就算通过，而不是强制整个字符串的长度必须是95、98或105。
• 字符集可能不对路：钱包地址通常不止包含\w覆盖的字符（\w是大小写字母、数字和下划线），很多钱包地址会有连字符-这类符号，\w匹配不了这些，自然会报错。

怎么改才对？ #

第一步：给正则加上锚点 #

把正则改成明确锁定开头(^)和结尾($)，确保整个字符串长度严格符合要求，有两种写法：
一种是每个分支都加锚点：

<input type="text" name="blahblah" required="required" pattern="^\w{95}$|^\w{98}$|^\w{105}$" title="Invalid wallet address" class="form-control form-control-md">

另一种更简洁的分组写法：

<input type="text" name="blahblah" required="required" pattern="^(\w{95}|\w{98}|\w{105})$" title="Invalid wallet address" class="form-control form-control-md">

第二步：调整字符集适配钱包地址 #

如果你的钱包地址有\w之外的字符（比如连字符），就把\w换成更合适的字符集，比如允许连字符的情况：

<input type="text" name="blahblah" required="required" pattern="^([\w-]{95}|[\w-]{98}|[\w-]{105})$" title="Invalid wallet address" class="form-control form-control-md">

要是还有其他特殊字符，比如.，就继续扩展字符集，比如[A-Za-z0-9-.]，完全按照你钱包地址的实际字符来调整就行。

测试一下 #

改完之后你可以直接在浏览器里试：

• 输入95个符合要求的字符：顺利通过
• 输入98个符合要求的字符：顺利通过
• 输入105个符合要求的字符：顺利通过
• 其他长度的字符：直接提示无效

这样就能精准实现你要的多长度验证啦！

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