用regex验证一个带小数点的数字范围。

Question

我想只允许从 0 - 59 与 3位数 的小数（小数是可选的）。

^([0-5]?[0-9])(?:\.[0-9]{1,3})?$

^([0-5]?[0-9])(\.\d{1,3})?$

我试着创建了这两个表达式，不幸的是，这两个表达式在表单验证中都是无效的，但在一些在线的regex验证器中似乎是有效的。

正在使用angular reactive forms!

任何帮助赞赏...!

Answer 1

你可以使用下面的regex来实现你的结果。

^(?:[1-4]?[0-9])(?:\.\d{1,3})?$|^[5]?[0-8](?:\.\d{1,3})?$|^59(\.0{1,3})?$

上述regex的解释。

(?:[1-4]?[0-9]) - 表示非捕获组匹配的单数或两位数的数字。注意 0[0-9] 是不允许的。如果你想允许像 04, 05等，使班级作为 [0-4].

(?:\.\d{1,3})? - 代表小数点位数在小数点位数的1至3位之间的可选匹配。

| - 代表交替。

^[5]?[0-8](?:\.\d{1,3})?$ - 匹配的数字从 50 通过 58.999.

^59(\.0{1,3})?$ - 匹配的数字 59.000 假设你的最终限额是 59. 如果你想让 59.<some decimal digit> 请删除这部分交替的内容，并在上面的内容中包括 ^[5]?[0-9].

你可以找到上述regex的演示。这里。

angular reactive-8表单中实现。

因为；angular reactive 8表单中附加了 ^ 和 $ 自动生成；您可以从上面的regex中省略它们。

app.component.html(注意 [pattern]="digit")

<input type="text" formControlName="digitCheck" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.digitCheck.errors }" [pattern]="digit" />
                    <div *ngIf="submitted && f.digitCheck.errors" class="invalid-feedback">

app.component.ts

digit="^(?:[1-4]?[0-9])(?:\\.\\d{1,3})?$|^[5]?[0-8](?:\\.\\d{1,3})?$|^59(\\.0{1,3})?$";
digitCheck: [null, [Validators.required, Validators.pattern(this.digit)]]    

你可以找到实时实现 在这里。