javascript - AngularJs 用户验证对每个字符发出请求

Question

嗨，我在我的项目中使用用户名验证器。但是当我开始编写一些东西时，它会在达到最小长度后请求每个字符。您可以在图片中看到。

这是我的来源；

页面中输入解析:

<input type="text" id="regUserName" name="regUserName" required minlength="5" maxlength="15" class="form-control" placeholder="Kullanıcı Adı" data-ng-model="regUserName" username-validator />

这里是 ValidationService.js 中的验证器:

angular.module('BlogAppModule').directive('usernameValidator', function ($http, $q) {
return {
    require: 'ngModel',
    link: function ($scope, element, attrs, ngModel) {
        ngModel.$asyncValidators.usernameAvailable = function (username) {
            return $http.get('/api/CheckUserName/' + username)
            .then(function (response) {
                var warning = document.getElementById("regUserName");
                if (response.data != null) {
                    warning.style.backgroundColor = "red";
                }
                else {
                    warning.style.backgroundColor = "white";
                }
            })
        }
    }
};

});

现在我对此有一些疑问:

1. 此请求会出现问题吗？(例如性能问题)
2. 我可以像离开文本框然后检查时一样设置此验证吗用户名？如果可以的话我该怎么办？
3. 当用户写“.”时请求不起作用。我怎样才能禁用文本输入特殊字符，例如:“.-,!#”等。

Answer 1

默认情况下，每次更改都会将更改写回模型。在 input 元素上使用 ng-model-options="{ updateOn: 'blur' }" 可在离开输入字段时更新绑定(bind)。

如果您还想添加客户端验证，则可以添加同步验证器。 $validator 将在 $asyncValidators 之前执行。

  link: function ($scope, element, attrs, ngModel) {
      ngModel.$asyncValidators.usernameAvailable = function (username) {
          // your server side validation
      };
      ngModel.$validators.userNameOk = function(username) {
        return username && username.indexOf('.') < 0;
      };
  }

http://plnkr.co/edit/Yd8C8Ut9VWPXEvDEMjFJ?p=preview