Angular输入框Pattern编写：支持三类经纬度输入的校验规则

需求梳理 #

为输入组件配置Pattern校验规则，需要覆盖三类合法输入，同时拦截非法字符与格式错误：

• 十进制度格式：允许整数、带单个小数点的小数、可选前置负号，示例如45、34.1234、-91.5
• 度分格式：数字间以单个半角空格分隔，共2段数字，示例如12 13
• 度分秒格式：数字间以单个半角空格分隔，共3段数字，示例如12 13 5
• 禁止出现多小数点、连续多余空格、非数字/空格/前置负号的非法字符

当前使用的示例代码存在明显逻辑缺陷：匹配范围过窄、额外加入了正则定界斜杠、无法兼容负数与多段分隔场景：

<!-- 旧示例 存在逻辑问题 -->
<input type="text" required pattern="/^[\d](\.| )?[\d]( )?[\d]">

适配需求的正确正则配置 #

正则表达式 #

^-?\d+(?:\.\d+)?(?: \d+){0,2}$

匹配逻辑说明 #

• ^-?：匹配可选的前置负号，兼容负坐标（南纬/西经）的输入场景
• \d+(?:\.\d+)?：匹配第一段核心数值，支持纯整数、带单个小数点的浮点数，无强制小数位数限制，可灵活适配十进制度的不同精度要求
• (?: \d+){0,2}：匹配0-2个由单个半角空格引导的数字段，刚好覆盖三类输入场景：
  • 匹配0个引导段：对应纯十进制度输入
  • 匹配1个引导段：对应度分格式输入
  • 匹配2个引导段：对应度分秒格式输入
• $：设置结尾边界，拦截输入内容末尾附带的非法字符
• 规则自动拦截连续空格：因为要求每个空格后必须紧跟数字，连续多空格的输入会因匹配失败被拦截，避免非法格式通过校验

组件使用示例 #

<input 
  type="text" 
  required 
  pattern="^-?\d+(?:\.\d+)?(?: \d+){0,2}$"
>

注意：Angular的pattern属性直接接收正则字符串作为参数，不需要额外包裹正则的/斜杠，否则会将斜杠作为待匹配的普通字符处理，导致校验逻辑错误。
如果后续需要增加坐标取值范围限制（比如纬度-90_{90、经度-180}180），可以在当前格式校验的基础上搭配Angular自定义校验器使用，当前正则已经完全覆盖要求的字符格式规则。

内容的提问来源于stack exchange，提问作者Nikhila Reddy C