当前位置: 首页 > 面试题库 >

angularjs:用于检查用户名是否存在的自定义指令

凌声
2023-03-14
问题内容

我有带有文本框用户名的注册表。我要做的是,当用户输入用户名时,自定义指令将检查输入的用户名是否存在于数据库中。

指令.js

angular.module('installApp').directive('pwCheck', function ($http) {
  return {
    require: 'ngModel',
      link: function (scope, elem, attrs, ctrl) {
        elem.on('blur', function (evt) {
          scope.$apply(function () {
          $http({ 
          method: 'GET', 
          url: '../api/v1/users', 
          data: { 
            username:elem.val(), 
            dbField:attrs.ngUnique 
          } 
      }).success(function(data, status, headers, config) {
        ctrl.$setValidity('unique', data.status);
        });
       });
      });
     }
    }
});

如果存在,我div class = "invalid"将在html表单中显示标签“用户名已存在”。

registration.html

    <form name  = "signupform">
      <label>{{label.username}}</label>
        <input type="text" id = "username" name = "username" ng-model="user.username" class="form-control"></input>
        <div class="invalid" ng-show="signupform.username.$dirty && signupform.username.$invalid"><span ng-show="signupform.username.$error.unique">Username already exists.</span>
        </div>
    </form>

但是现在,他们不能正常工作:-(,我在做对吗?


问题答案:

yearofmoo提供 了一个很棒的教程, 介绍
有关angular1.3中的$ asyncvalidators的信息。当后端检查字段时,它可以让您轻松显示待处理状态:

这是一个工作的 plnkr

app.directive('usernameAvailable', function($timeout, $q) {
  return {
    restrict: 'AE',
    require: 'ngModel',
    link: function(scope, elm, attr, model) { 
      model.$asyncValidators.usernameExists = function() {

        //here you should access the backend, to check if username exists
        //and return a promise
        //here we're using $q and $timeout to mimic a backend call 
        //that will resolve after 1 sec

        var defer = $q.defer();
        $timeout(function(){
          model.$setValidity('usernameExists', false); 
          defer.resolve;
        }, 1000);
        return defer.promise;
      };
    }
  } 
});

的HTML:

<form name="myForm">
  <input type="text" 
        name="username"
        ng-model="username" 
        username-available 
        required
        ng-model-options="{ updateOn: 'blur' }">
  <div ng-if="myForm.$pending.usernameExists">checking....</div>
  <div ng-if="myForm.$error.usernameExists">username exists already</div>
</form>

注意ng-model-
options
的使用,1.3的另一个很酷的功能

编辑

这是一个显示如何在指令中使用$ http
的plnkr。请注意,它仅请求另一个包含true
/ false值的.json文件。指令将相应地在ng-model上设置有效性。



 类似资料:
  • 我有麻烦让我的代码工作。当用户输入用户名时,它会检查数据库,看看它是否存在,以及它是否设置了

  • 问题内容: 我正在尝试允许用户通过搜索用户名来开始游戏并关注其他用户。我需要确保具有该用户名的用户存在。我正在使用以下代码,但是尽管调用了,但在应调用时却没有被调用。 JSON数据树 问题答案: 轻松解决: 不要使用.childAdded,因为当查询找不到任何内容时,该块将不会执行。 而是使用.Value并检查NSNull

  • 问题内容: 我正在尝试检查用户名是否存在。当我打电话时,快照值始终可用,但是它将打印我的整个数据库,而不仅仅是我请求的数据。当我打电话时,它总是返回null。我尝试了很多方法来解决。 这是我的代码: 这是我的json树: 这是安全规则: 问题答案: 修改 JSON 树以包含一个单独的节点,即在您创建新用户时添加每个用户的用户名,在用户修改其用户名时进行修改… 要检查您的用户名是否已经存在: 通过操

  • 我希望用户能够编辑管理后端面板上自己的电子邮件内容,用户可以使用一些指令,如: 因此,例如,用户可以在 : 我如何在Laravel中创建一些自定义指令,任何我可以用来简化开发的库?当然,用户不允许使用PHP代码。 我知道有Laravel刀片,但我不确定这是安全的,用于公众用户编辑内容和只允许客户指令。

  • 我想检查一个用户名是否已经存在于我的数据库中。如果是的话,我想重定向回我的注册页面。我的代码可以添加用户名,但不检查用户名是否存在。请救命!!!这是register.php页面的代码。代码完全跳过对'username'的检查,并将其插入到数据库中(如果它存在或不存在)。

  • 问题内容: 因此,基本上,我想在注册表格中添加一个功能,该功能将检查数据库中是否已存在该用户名。 我对AJAX有几个问题- 1)我想创建一个AJAX请求on_change函数,所以像这样- 因此,据我所知,我必须在validation.php文件中包含所有在PHP中进行的验证,对吗?是否需要任何特殊的验证,或者只是使用sql语句进行的简单验证- 2)据我所知,我也必须通过$ .ajax传递POST