用于验证的自定义 Angular JS 指令

Custom Angular JS directive for validation

本文关键字：JS 指令 Angular 自定义 验证 用于      更新时间：2023-09-26

我是JavaScript和Angular JS的新手。我必须编写一个自定义指令来验证在.aspx页面中传递的输入字段的内容;更准确地说，我必须检查输入中传递的值的用户名是否已存在。在我的指导中，我必须调用一个检查数据库中重复项的服务，然后根据结果，我必须执行成功回调/错误回调，并返回一个包含有关验证检查的信息的对象和一条消息。特别是，我被困在关于回调和返回带有信息的对象的最后一部分（在我的版本中我不能使用 $.defer）。

不幸的是，我无法利用 Angular 提供的表单（即$asynchrounous验证器和 $q.defer）已经存在的自定义验证，因为我必须使用旧版本的 Angular 1.2.26。你能给我一些关于如何实现它的提示/例子吗？我正在努力尝试，但我仍然发现自定义指令有点困难，我找不到自定义验证的示例（基于 Angular 1.3 $asynch验证器的示例除外）。

提前谢谢你

您可以在指令的链接或控制器函数中轻松使用$http服务，并对响应数据进行操作。具体是什么问题，你能说得更清楚吗？

您可以为此编写自己的指令： 示例

app.directive('asyncNameCheck', function($http){
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elm, attr, ngModel){
      elm.bind('input', function(){
        ngModel.$setValidity('asyncValid', false);
        $http.get('http://graph.facebook.com/facebook')
          .success(function(data){
            ngModel.$setValidity('asyncValid', true);
          });
      })
    }
  }
})

并在 HTML 中

<form name="myform">
  <input name="testfield" async-name-check required ng-model="test"/>
  <p ng-show="myform.testfield.$error.asyncValid">This field is invalid</p>
</form>

请注意，此指令不是可重用的指令，但可以满足您的要求。 不要在控制器中执行此操作，我花了很多时间进行角度验证，如果您在控制器中控制验证，以后会给您带来很多问题。

相关文章：