Chrome中input的pattern属性正则^(?!-)[A-Za-z0-9-]{1,63}(?<!-)$报错求助

问题根源 #

HTML的pattern属性会自动为正则表达式添加^和$锚点，你手动添加的锚点会导致匹配规则重复；同时Chrome对后行断言（(?<!-)）在pattern属性中的处理存在兼容性问题，这就是报错的核心原因。

解决方案 #

方案1：简化原正则（保留前后断言）

去掉原正则首尾的^和$，让浏览器自动添加锚点即可：

<input pattern="(?!-)[A-Za-z0-9-]{1,63}(?<!-)" type="text" name="third-level-domains" id="third-level-domains" autocomplete="true" class="text-gray-900 bg-white border border-borders sm:text-sm focus:ring-primary-500 focus:border-primary-500 block w-full dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 thirdLevelDomainsInput" placeholder="example">

方案2：使用无前后断言的兼容写法（更稳妥）

改用无需断言的正则，彻底避免浏览器引擎差异问题：

<input pattern="[A-Za-z0-9](?:[A-Za-z0-9-]{0,61}[A-Za-z0-9])?" type="text" name="third-level-domains" id="third-level-domains" autocomplete="true" class="text-gray-900 bg-white border border-borders sm:text-sm focus:ring-primary-500 focus:border-primary-500 block w-full dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 thirdLevelDomainsInput" placeholder="example">

该正则的逻辑：

• 开头必须是字母或数字，确保不以-开头
• 中间可包含0-61个字母、数字或-，结尾必须是字母或数字，确保不以-结尾
• 整体长度范围1-63，完全符合你的验证要求
• 仅允许字母、数字和-三类字符

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