HTML5 input pattern设置：版本号输入首位禁止以0开头

我帮你调整了正则表达式，完美匹配你提出的需求：至少包含3个数字段，且首个数字段不能以0开头（包括单个0的情况）。

完整代码示例 #

<form onsubmit="alert('Submitted.');return false;"> 
  <input 
    type="text" 
    required="" 
    pattern="^[1-9]\d*(\.\d+){2,}$" 
    title="请输入合法的版本号，格式示例：1.1.1、11.11.11、11.10.11.1，首个数字段不能以0开头"
    value="" 
    placeholder="Try it out."
  > 
  <input type="submit" value="提交"> 
</form>

正则表达式详解 #

让我拆解一下这个正则^[1-9]\d*(\.\d+){2,}$的每个部分：

• ^：匹配字符串的起始位置，确保校验从开头开始
• [1-9]\d*：定义首个数字段：
  • [1-9]：必须以非0的数字开头
  • \d*：后面可以跟任意数量的数字（包括0个，也就是单个非0数字也合法，比如1作为首段）
• (\.\d+){2,}：定义后续的数字段：
  • \.\d+：一个点号加上至少一位数字（避免空段，比如1..1这种非法格式）
  • {2,}：要求这样的后续段至少有2个，确保整体版本号至少有3个数字段
• $：匹配字符串的结束位置，避免输入内容后面有多余的非法字符

测试用例验证 #

合法格式（会通过校验）

• 1.1.1
• 11.11.11
• 11.10.11.1
• 999.0.0.0.0（支持超过3个数字段）

非法格式（会被拦截）

• 01.1.1（首段以0开头）
• 0.11.11.11（首段为单个0）
• 1.1（只有2个数字段）
• abc.1.1（包含非数字字符）
• 1..1.1（存在空的数字段）

为什么原来的正则不适用？ #

你原来的((^|\.)(([1-9]?\d))){2,4}$存在几个问题：

1. 允许首段以0开头（比如01，因为[1-9]?\d可以匹配0开头的数字）
2. 允许首段为单个0（不符合你拦截0.11.11.11的要求）
3. 只限制了2-4个数字段，但你需要至少3个，原来的正则会允许2段的情况（比如1.1）

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