Javascript 如何创建远程验证表单的指令？

我正在创建一个远程验证指令，该指令允许我与服务器检查字段是否已验证

到目前为止，我有：

angular.module('Form').directive('remoteFieldValidation', function (Query) {
        return {
            restrict: 'A',
            scope: {
                fieldValue: '=ngModel'
            },
            link: function (scope, element, attr) {
                element.parent().addClass('has-feedback');
                element.focusout(function (value) {
                    var value = scope.fieldValue;
                    var checker = attr.remoteFieldValidation;
                    if (value && checker) {
                        element.parent().append('<span class="form-control-feedback fa fa-spinner fa-spin" style="line-height: 35px"></span>');
                        Query.api2({
                            method: 'GET',
                            route: 'validateField',
                            params: {
                                value: value,
                                checker: checker
                            }
                        }).then(function (result) {
                        })
                    }
                    else {
                        console.log('Missing checker or value');
                    }
                })
            }
        }
    });

angular.module（'Form'）。指令（'remoteFieldValidation'，函数（查询）{
返回{
限制：“A”，
范围：{
字段值：'=ngModel'
},
链接：功能（范围、元素、属性）{
element.parent（）.addClass（'has-feedback'）；
元素。焦点输出（函数（值）{
var值=scope.fieldValue；
var checker=attr.remoteFieldValidation；
如果（值和检查程序）{
element.parent（）.append（“”）；
Query.api2({
方法：“GET”，
路由：“validateField”，
参数：{
价值：价值，
检查者：检查者
}
}).然后（函数（结果）{
})
}
否则{
console.log（“缺少检查程序或值”）；
}
})
}
}
});

因为clearance Query是我自己的API服务，它基本上控制

$http请求

现在，当我将此属性指令添加到输入字段时，我希望确保一旦开始验证，它就会将表单设置为无效

但是，我不太确定如何从这个指令中获取表单

---

有人知道我可以如何防止用户在检查远程验证之前提交表单吗？

您可以通过静态方式执行此操作，只需让提交操作等待服务器验证您的字段。但是，更好的方法是在

ngModel

上添加一个。这是AngularJs 1.3发行版带来的一项功能

通过使用此解决方案，您将能够使用角形分布捕捉验证错误：

<div ng-show="form.myField.$error.myRemoteValidator">The value is not valid!</div>

您的指令如下所示：

angular.module('Form')
     .directive('remoteFieldValidation', function(Query, $q) {
       return {
         restrict: 'A',
         require: 'ngModel',
         link: function(scope, element, attr, ngModelCtrl) {
           ngModelCtrl.$asyncValidators
             .myRemoteValidator = function(modelValue, viewValue) {
               var value = modelValue || viewValue;
               var checker = attr.remoteFieldValidation;

               return Query.api2({
                 method: 'GET',
                 route: 'validateField',
                 params: {
                   value: value,
                   checker: checker
                 }
               }).then(function(result) {
                 if (result.isValid) {
                   // it says to validator that it's valid
                   return true;
                 } else {
                   // it says to validator that it's not valid
                   // and also send the error message
                   return $q.reject('Invalid field');
                 }
               }, $q.reject); // invalidate in case of any errors on your api or request 
             };
         }
       }
     });

更新

例如：

<form name="form">
    ...
    <input type="text" ng-model="myField" remote-field-validation>
    <div ng-messages="form.myField.$error">
        <div ng-message="myRemoteValidator">The value is not valid!</div>
    </div>
    ...
    <button ng-disabled="form.$invalid">Save</button>
</form>

...
该值无效！
...
拯救

只需让提交操作等待服务器验证字段，就可以以静态方式完成此操作。但是，更好的方法是在

ngModel

上添加一个。这是AngularJs 1.3发行版带来的一项功能

通过使用此解决方案，您将能够使用角形分布捕捉验证错误：

<div ng-show="form.myField.$error.myRemoteValidator">The value is not valid!</div>

您的指令如下所示：

angular.module('Form')
     .directive('remoteFieldValidation', function(Query, $q) {
       return {
         restrict: 'A',
         require: 'ngModel',
         link: function(scope, element, attr, ngModelCtrl) {
           ngModelCtrl.$asyncValidators
             .myRemoteValidator = function(modelValue, viewValue) {
               var value = modelValue || viewValue;
               var checker = attr.remoteFieldValidation;

               return Query.api2({
                 method: 'GET',
                 route: 'validateField',
                 params: {
                   value: value,
                   checker: checker
                 }
               }).then(function(result) {
                 if (result.isValid) {
                   // it says to validator that it's valid
                   return true;
                 } else {
                   // it says to validator that it's not valid
                   // and also send the error message
                   return $q.reject('Invalid field');
                 }
               }, $q.reject); // invalidate in case of any errors on your api or request 
             };
         }
       }
     });

更新

例如：

<form name="form">
    ...
    <input type="text" ng-model="myField" remote-field-validation>
    <div ng-messages="form.myField.$error">
        <div ng-message="myRemoteValidator">The value is not valid!</div>
    </div>
    ...
    <button ng-disabled="form.$invalid">Save</button>
</form>

...
该值无效！
...
拯救

您可以在此处阅读如何实现异步验证器：您可以在此处阅读如何实现异步验证器：我将把指令放在哪里？在哪个字段上？您必须将其添加到包含需要验证的

ngModel

的字段中。我在一个名为

myField

的字段中使用了一个别名，但您有了这个想法，并使用了自己的别名，只需确保它位于ngModel上，因为$asyncValidator来自ngModel controller。谢谢，但我应该将ngMessage放在哪里？这是在同一个指令上还是在一个单独的div块上？

ng messages

将通过表单验证触发，它可以放在任何你想显示验证消息的地方，只要确保它与主表单位于同一个控制器上即可。谢谢你能发布你的html吗？这样我就可以确切地知道它是如何工作的我将我的指令放在哪里？在哪个字段上？您必须将其添加到包含需要验证的

ngModel

的字段中。我在一个名为

myField

的字段中使用了一个别名，但您有了这个想法，并使用了自己的别名，只需确保它位于ngModel上，因为$asyncValidator来自ngModel controller。谢谢，但我应该将ngMessage放在哪里？这是在同一个指令上还是在一个单独的div块上？

ng messages

将通过表单验证触发，它可以放在任何你想显示验证消息的地方，只要确保与主表单在同一个控制器上即可。谢谢你能发布你的html，这样我就可以确切地知道它是如何工作的吗