HTML 輸入類型號，防止插入無效號

Question

我有以下輸入號碼：

 <input type="number" id="quantity" name="quantity"  (change)="firstRangePointChanged($event)" >

我想防止用戶輸入無效值，例如 --99 (--) 而不是 (-) ，我嘗試使用：

if (Number.isNaN(num)) {
          event.preventDefault();

但它不起作用。

我想允許負數但不允許 --99。 我希望如果用戶插入無效數字，則將值返回到前一個（該輸入的最后一個有效值）：

 firstRangePointChanged(event) {
   
    const num = parseFloat(event.target.value);
    if (Number.isNaN(num)) {
      event.preventDefault();
      return;
    }
}

Answer 1

您可以簡單地在模式中使用正則表達式來做到這一點。 例如：

<input type="text" id="country_code" name="country_code"
  pattern="[A-Za-z]{3}" title="Three letter country code">

remember for use pattern, you must use type:"text" to allow you to use regex in pattern

Answer 2

 function is_validNumber(n){ // check value is number or not if( n == NaN ){ return false; } let b = typeof n; if( b == 'number' || b == 'string' ){ // Math.round(Number(n):to supported decimal number return String(n).length? Number.isInteger( Number(n) ): false; } return false; } // ========================================================= function numValidation_(n){ // add history valid number of this input if( n.history_validNumber == undefined ){ n.history_validNumber = 0; // default value } let val_ = n.value; if( is_validNumber(val_) ){ n.history_validNumber = val_; // add history console.log('valid'); }else{ // invalid n.value = n.history_validNumber; console.log(`invalid, set last valid:${n.history_validNumber}`); } }

 <input type="number" onchange="numValidation_(this)" />

Answer 3

您可以使用正則表達式來處理這個問題，例如：

Angular 版本是：

let {pattern} = Validators;

this.formGroup = this.fb.group({
     price:['',pattern("^([1-9]+[0-9]* | [1-9])$")]
})

將表單組綁定到您的輸入以僅接受正數，替換您想要的模式。

在你的模板中：

<form [ngForm]="formGroup">
   <label for="price">Price</label>
   <input type="number" name="price" formControlName="price" />
</form>