Angular应用0-99含两位小数输入验证正则表达式需求

直接使用这个正则即可覆盖所有要求的场景：

^(0|[1-9][0-9]?)(\.[0-9]{1,2})?$

正则规则拆解 #

• ^(0|[1-9][0-9]?)：锁定整数部分的合法范围
  • 0：单独匹配0这个合法值
  • [1-9][0-9]?：匹配1-9开头的1位或2位数（即1-99），直接排除100及以上的三位数
• (\.[0-9]{1,2})?$：处理可选的小数部分
  • \.：匹配小数点，必须跟数字组合出现
  • [0-9]{1,2}：限制小数点后只能有1到2位数字
  • ?$：表示小数部分是可选的，但一旦出现就必须符合前面的规则

示例验证 #

• 合法输入全部通过：
  • 0 → 匹配整数部分的0
  • 0.1 → 匹配0 + .1
  • 1.12 → 匹配1 + .12
  • 12.12 → 匹配12 + .12
• 非法输入全部拦截：
  • 100 → 整数部分是三位，不满足[1-9][0-9]?的长度限制
  • 19.111 → 小数部分是三位，不满足{1,2}的位数要求
  • 1. → 只有小数点没有后续数字，不符合小数部分的规则

Angular中使用示例 #

在表单控件里搭配Validators.pattern直接使用：

import { FormBuilder, Validators } from '@angular/forms';

// 组件内初始化表单示例
constructor(private fb: FormBuilder) {}

ngOnInit() {
  this.numberForm = this.fb.group({
    value: ['', [
      Validators.required, // 按需添加必填规则
      Validators.pattern(/^(0|[1-9][0-9]?)(\.[0-9]{1,2})?$/)
    ]]
  });
}

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