Javascript AngularJs中的Nick验证-每秒在单个HTTP请求中分组更改

我想做简单的“尼克自由或采取”验证。当使用jquery时，我求助于“监听器”，每1-2秒引发一次“更改”事件，这样我就不会为每次击键发出HTTP GET请求，而是每1-2秒发出一次HTTP GET

然而，我只有以下几点：

<input id="nick" ng-model="nickSelected" ng-change="nickChanged()" />

但很明显，每次击键都会执行此操作

---

那么，AngularJS中是否有任何侦听器指令会每秒左右引发nickChanged，而不是每次击键都这样做？或者我可以对特定的$http.get说什么，只执行一秒钟左右？

如果有可能多次运行的方法，可以在下划线/lodash中使用类似（）的内容。另外，你可能会考虑使用模糊根据你的要求。

< P>我建议你写自己的指令。您应该使用

$timeout

延迟进行验证。当然没有理由重新发明轮子，所以

是一个指令，将在用户完成键入后进行验证

我没有做这个，但它工作得很好，写得也很好，因此查看src可能会帮助您在将来为自己开发这种东西。

好的

这个特别的答案帮助很大-

以下是最终指令：

app.directive('nickUnique', ['$http', '$timeout', function ($http, $timeout) {
    return {
        require: 'ngModel',
        link: function (scope, ele, attrs, c) {
            var timer = false; // for grouping calls
            scope.$watch(attrs.ngModel, function () {
                // for when $setPristine(true) is called
                if (c.$pristine) {
                    c.$setValidity('httpinprogress', true);
                    c.$setValidity('nickUnique', true);
                }

                // only execute for otherwise "valid" nick
                if (c.$viewValue != null && c.$dirty &&
                    c.$viewValue.length >= 4 && c.$viewValue.length <= 12) {
                    if (timer) {
                        $timeout.cancel(timer);
                    }

                    c.$setValidity('httpinprogress', false);
                    c.$setValidity('nickUnique', true);

                    timer = $timeout(function () {
                        $http.get("/path/to/service", { params: { Nick: c.$viewValue } })
                            .success(function (data, status, headers, cfg) {
                                if (data.RequestNick === c.$viewValue) {
                                    c.$setValidity('httpinprogress', true);
                                    c.$setValidity('nickUnique', data.Valid);
                                }
                            }).error(function (data, status, headers, cfg) {
                                c.$setValidity('nickUnique', false);
                            });
                    }, 250);
                }
            });
        }
    };
}]);

最后，根据$error属性的状态显示验证错误。例如，如果您还验证required、minlength和maxlength，您将得到如下内容：

<span class="error" ng-show="myForm.Nick.$dirty && myForm.Nick.$invalid">
    <small class="error" ng-show="myForm.Nick.$error.required">is required field</small>
    <small class="error" ng-show="myForm.Nick.$error.minlength">is required to be at least 4 characters</small>
    <small class="error" ng-show="myForm.Nick.$error.maxlength">is required to be less than 12 characters</small>
    <small class="error" ng-show="!myForm.Nick.$error.required && 
        !myForm.Nick.$error.minlength && 
        !myForm.Nick.$error.maxlength && 
        myForm.Nick.$error.nickUnique">is taken, please try another</small>
</span>

是必填字段
必须至少包含4个字符
必须少于12个字符
有人了，请再试一次

这篇文章很有帮助：

<input name="nick" ng-model="myCtrl.Nick" nick-unique />

{ Valid: true/false, RequestNick: echo_nick_sent }

<span class="error" ng-show="myForm.Nick.$dirty && myForm.Nick.$invalid">
    <small class="error" ng-show="myForm.Nick.$error.required">is required field</small>
    <small class="error" ng-show="myForm.Nick.$error.minlength">is required to be at least 4 characters</small>
    <small class="error" ng-show="myForm.Nick.$error.maxlength">is required to be less than 12 characters</small>
    <small class="error" ng-show="!myForm.Nick.$error.required && 
        !myForm.Nick.$error.minlength && 
        !myForm.Nick.$error.maxlength && 
        myForm.Nick.$error.nickUnique">is taken, please try another</small>
</span>