AngularJS中巧用ngModel的$asyncValidators属性写一个验证唯一性的Direcitve

最新推荐文章于 2024-11-25 17:10:27 发布

转载最新推荐文章于 2024-11-25 17:10:27 发布 · 237 阅读

文章标签：

本文介绍如何在AngularJS中实现对用户邮箱的唯一性校验，通过自定义指令(myUnique)与远程API交互，确保在添加或编辑用户时，email字段不重复。文章详细展示了如何使用$asyncValidators进行异步验证，以及如何处理主键和email属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有这样的一个需求：添加用户的时候，根据主键判断当前添加用户的email是否已经被使用。

为此，我们需要把主键和email来传递给远程的一个API，让API返回结果，告之当前email是否被使用过。

写一个验证email唯一性的Directive，页面大致如下表现：

<input type="text" name="email" class="form-control"
    data-ng-model="vm.customer.email"
    data-ng-model-options="{updateOn: 'blur', allowInvalid: true}"
    data-my-unique
    data-my-unique-key="{{vm.customer.id}}"
    data-my-unique-property="email"
    data-ng-minlength="3"
    required />
    
<span class="errorMessage" ng-show="editForm.email.$touched && editForm.email.$error.unique">
    Email already in use
</span>

以上，data-my-unique-key用来接收主键，data-my-unique-property用来接受email这个值。

Directive部分大致如下：

(function(){
    var injectParams = ['$q', 'dataService'];
    var myUniqueDirective = function($q, dataService){
    
        var link = function(scope, element, attrs, ngModel){
            ngModel.$asyncValidators.unique = function(modelValue, viewValue){
                var deferred = $q.defer(),
                    currentValue = modelValue || viewValue,
                    
                    //获取主键
                    key = attrs.myUniqueKey,//my-unqiue-key = "{{customer.id}}"
                    
                    //获取email
                    property=attrs.myUnqiueProperty; //my-unique-property="email"
                
                if(key && property){
                    dataService.checkUniqueValue(key, property, currentValue)
                        .then(function(unique){
                            if(unique){
                                deferred.resolve();
                            } else {
                                deferred.reject();
                            }
                        });
                    return deferred.promise;
                } else {
                    return $q.when(true);
                }
            }
        };
       
        return {
            restrict: 'A',
            require: 'ngModel',
            link: link
        }
    };
    
    myUniqueDirective.$inject = injectParams;
    
    angular.module('customersApp').directive('myUnique', myUniqueDirective);
}());