Question

我有输入类型编号，我想将其限制为1到2之间的数字。它可以接受0.00001和2之间的数字，小数位数最多为5而不是0。

我该怎么做？并且用户也必须无法手动编写任何其他内容。

我尝试过min =“1”和max =“2”属性，但是用户仍然可以手动输入0并且正在提交表单。

我的项目基于角度5，我正在使用模板驱动的表单。请不要建议反应形式的解决方案。

Answer 1

你也可以试试正则表达式

如果您希望数字在1-2范围内，5位小数而不是数字2，则使用下面的模式，

[1] +（[0-9] [0-9] [0-9] [0-9] [0-9]）？

如果你想要小于等于2，你可以将模式设置为，

^（？：2 | 2.0 | 2.00 | 2.000 | 2.0000 | 2.00000 |（。[0] {1,2}）？|（[1]）（。[0-9]？[0-9] ？[0-9] [0-9] [0-9]）？）$

例如：

<input class="form-control" 
           [(ngModel)]="data" name="dataModel" #dataModel="ngModel" required
           pattern="^(?:([2])(\.[0]*)? | (\.[0]{1,2})?|([1])(\.[0-9]?[0-9]?[0-9]?[0-9]?[0-9]?)?)$">
    <div *ngIf="dataModel.errors && (dataModel.dirty || dataModel.touched)">
      <small [hidden]="!dataModel.errors.required">
        Required
      </small>
      <small [hidden]="!dataModel.errors.pattern">
        pattern check
      </small>         
    </div>

如果你想要的范围是0-2，包括2，那么你可以设置模式为，

^（？：2 | 2.0 | 2.00 | 2.000 | 2.0000 | 2.00000 |（。[0] {1,2}）？|（[0-1]）（。[0-9]？[0- 9] [0-9] [0-9] [0-9]）？）$

如果你想在0-2范围内排除0，那么模式可以是（这种模式接受0.00001到2.00000数字），

^（2 | 2.0 | 2.00 | 2.000 | 2.0000 | 2.00000 |。？？？？？（[1] +（[0-9] [0-9] [0-9] [0-9] [ 0-9]）{1} |？[0] +（[0-9] {0,4} [1-9] {1}）））$

Answer 2

试试这个。

<input type="number" step="0.00001" max="2" min="1" [(ngModel)]="data" #value="ngModel" required/>

<div *ngIf="value.invalid && (name.dirty || name.touched)"
     class="alert alert-danger">

  <div *ngIf="value.errors.required">
    Value is required.
  </div>
  <div *ngIf="value.errors.min">
    Should not be less than 1
  </div>
  <div *ngIf="value.errors.max">
    Should not be greater than 2
  </div>

</div>

验证您的字段的最小值和最大值，并显示错误消息。

Answer 3

我尝试过min =“1”和max =“2”属性。但用户仍然可以手动输入0并提交表格。

您可以在此keydown使用(keydown)="false"事件，这会阻止用户输入任何内容，但他仍然可以使用箭头控制来增加和减少数字。
我建议您也禁用粘贴选项(paste)="false"以防止在输入字段中粘贴。

   <input type="number" step="0.00001" max="2" min="1" (keydown)="false" (paste)="false" required/>

Answer 4

您可以为每个按键事件触发一个函数并编写验证逻辑，以便用户只能输入有效值。

<input type="number" step="0.00001" max="2" min="1" (keydown)="filterValue($event)" (paste)="false" required/>

功能：

  var filterValue = function($event){
     var keys={ 'up': 38,'right':39,'down':40,'left':37,                      
              'escape':27,'backspace':8,'tab':9,'enter':13,'del':46,                                
   '0':48,'1':49,'2':50,'3':51,'4':52,'5':53,'6':54,'7':55,'8':56,'9':57
         };
                   for(var index in keys) {
                            if (!keys.hasOwnProperty(index)) continue;
                            if ($event.charCode==keys[index]||$event.keyCode==keys[index]) {
                                return; //default event
                            }
                        }   
                        $event.preventDefault();
                 };

仅在keys对象中定义所需的值，以便不允许用户输入其他值。

输入类型编号验证

4 个答案: