javascript - 用于输入验证的 Angular 自定义指令

Question

我正在尝试在 angularJS 中创建简单的自定义指令它验证用户是否输入了整数。

如果用户输入整数，则错误消息应出现在底部“不允许使用整数”。

知道我怎样才能做到这一点......？( fiddle 就太棒了)

还有...

使用 $scope.$watch 可以不使用吗？

这是检查客户端输入的专业且有效的方法吗验证 ？ (这种方法是否会损害应用程序的性能)？

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 />