用於輸入驗證的Angular定制指令

Question

我正在嘗試在angularJS中創建簡單的自定義指令，該指令可驗證用戶是否輸入整數。

如果用戶輸入整數，則錯誤消息應顯示在底部，提示“不允許使用整數” 。

知道我該如何實現...？ （小提琴太棒了）

並且...

這是可以做到的，不許使用$范圍。$看？

這是檢查客戶端輸入驗證的專業有效方法嗎？ （這種方法是否會損害應用程序的性能）？

Answer 1

您可以使用ng-pattern驗證它是否為有效數字。 另一種方法是根據您的要求，創建一個自定義指令。 我要使用notNumber名稱，也可以用很小的變化也可以是isNumber 。

angular.module('app')
  .directive('notNumber', notNumber);

function notNumber() {
  return {
    require: 'ngModel',
    link: function(scope, elem, attr, ctrl) {
      ctrl.$formatters.unshift(function(value) {
        if (value) {
          ctrl.$setValidity('notNumber', Number.isNaN(value));
        }
        return value;
      });
    }
  };
}

在HTML中，

<input type="text" ng-model="model" not-number />

Answer 2

比您預期的要簡單。...使用ng-pattern

<input type="text" ng-model="model" ng-pattern="\\d+" />

上面的docs鏈接中的演示默認設置為此模式。

至於這樣做……當然，以表格形式實時提供用戶反饋是正常的。 盡管必須完成，但這並不會減輕服務器端驗證的難度