Angular模板表单验证如何编写正则限制输入值为1-10

你对正则字符集的语法理解有误：

• 方括号[]在正则中仅用于定义单个字符的匹配集合，只会匹配集合内出现的任意1个独立字符，不支持多字符组合匹配
• 集合内的|、()都不会被识别为“或”“分组”的特殊语法，只会被当成普通字符匹配。

• pattern="[1|2|3|4|5|6|7|8|9|10]"：实际匹配规则是“匹配1、|、2、3、4、5、6、7、8、9、0中的任意单个字符”。你写的10会被拆成独立的1和0两个字符，所以会错误放行0，也只能匹配到10的第一个字符1，无法识别完整的10，甚至会允许用户输入竖线|。
• pattern="[1|2|3|4|5|6|7|8|9|(10)]"：和上面的问题完全一致，括号()在字符集内是普通字符，除了0之外还会错误放行左括号、右括号。
• pattern="[1|2|3|4|5|6|7|8|9|(10)]{1}"：加{1}没有任何实际作用，字符集本身默认就只匹配单个字符。

针对1-10的整数校验，在Angular模板表单中可以直接使用下面的写法：

<input type="number" pattern="^(10|[1-9])$" name="num" ngModel>

规则说明：

• 必须加上^（字符串开头标记）和$（字符串结尾标记），否则会出现部分匹配问题，比如放行11、01、a1这类包含合法片段但整体不符合要求的输入
• 圆括号()外的|才代表“或”逻辑：要么匹配双字符组合10，要么匹配1-9之间的单个数字
• 搭配type="number"属性可以在移动端唤起数字键盘，提前过滤非数字输入，优化交互体验。

这个写法可以精准匹配1到10的所有整数，不会放行0、大于10的数字、非数字内容。

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