javascript - 正则表达式验证带小数点的数字范围

Question

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

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

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

我尝试创建这两个表达式，不幸的是，这两个表达式在表单验证上都无效，但似乎在某些在线正则表达式验证器上有效

我正在使用角度反应形式！

任何帮助表示赞赏..！

标签： javascriptregexangularangular-reactive-forms

Answer 1

您可以使用以下正则表达式来实现您的结果：

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

上述正则表达式的解释：

(?:[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].

您可以在此处找到上述正则表达式的演示。

以角度响应 8 形式实现：

自从; 角度反应 8 形式自动附加^；$您可以从上面的正则表达式中省略它们。

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)]]    

您可以在此处找到实时实现。