輸入類型編號驗證

Question

我有輸入類型數字，我想將其限制為僅1到2之間的數字。它可以接受0.00001到2之間的數字，小數位數最多為5，而不是0。

我該怎么做？ 而且，用戶必須不能手動編寫其他任何內容。

我已經嘗試過min =“ 1”和max =“ 2”屬性，但是用戶仍然可以手動輸入0並提交表單。

我的項目基於angular 5，並且我使用的是模板驅動的表單。 請不要提出反應形式的解決方案。

Answer 1

您也可以嘗試正則表達式

如果您希望數字在1-2的范圍內且有5個小數，而沒有數字2，請使用以下模式，

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

如果您希望小於等於2，可以將pattern設置為

^（?: 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對象中僅定義必需的值，以便不允許用戶輸入其他值。