HTML5 input pattern属性校验经纬度字符串的正则编写问题

错误原因排查 #

你的原有正则存在3个明显问题：

• HTML5 pattern 属性不需要加正则字面量首尾的 / 分隔符，多余的 / 会被识别为需要匹配的普通字符，直接导致匹配失败
• 没有匹配目标格式结尾的闭合方括号 ]，原有正则匹配到经度数值就结束了，完全没有处理末尾的 ]
• 逗号不需要额外转义，多余的转义符属于冗余写法，虽然不影响匹配但没必要保留

修正后的代码 #

如果你不需要支持逗号前后的空格，直接用以下写法即可匹配你给出的[29.71620257395901,-95.42931508327673]格式：

<input type="text" name="latlon" pattern="\[[+-]?\d+(?:\.\d+)?,[+-]?\d+(?:\.\d+)?\]" />

如果需要兼容逗号前后带空格的写法（比如[29.7162, -95.4293]），可以调整正则为：

<input type="text" name="latlon" pattern="\[[+-]?\d+(?:\.\d+)?\s*,\s*[+-]?\d+(?:\.\d+)?\]" />

额外说明 #

如果需要进一步校验经纬度的合法取值范围（纬度范围-90_{90，经度范围-180}180），可以使用更严谨的正则：

\[([+-]?(?:90(?:\.0+)?|[1-8]?\d(?:\.\d+)?)),\s*([+-]?(?:180(?:\.0+)?|1[0-7]\d(?:\.\d+)?|[1-9]?\d(?:\.\d+)?))\]

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