Angular AJAX验证器.在验证过程中防止提交的最佳方法

Angular AJAX validator. Best way to prevent submission while validation in progress?

本文关键字：验证 提交 最佳 方法 过程中 AJAX Angular      更新时间：2023-09-26

使用Angular表单，很容易看出表单是$valid还是$invalid。这很好，我只允许用户提交表单，如果它是$有效的。

但是，是否有一种简单的方法来表明它正在验证过程中?(我们不清楚它是否有效)

如果您正在检查(例如)电子邮件地址是否有效，这是可取的。在AJAX调用返回之前，我不想将字段标记为$invalid(否则我可能会在没有错误的情况下向用户显示错误)。但我不希望他们能够提交，如果我们还在检查电子邮件地址…

有什么建议吗?

我用于AJAX验证器的代码是基于AngularJS:与服务器端验证集成(感谢@BenLesh)。

function linkFunc(scope, el, attr, ctrl) {
  // When the scope changes, check the email.
  scope.$watch(attr.ngModel, validate);
  function validate (value)
  {
    // Show as valid until proven invalid
    ctrl.$setValidity('validateEmail', true);
    // if there was a previous attempt, stop it.
    if(timeoutId) {
      clearTimeout(timeoutId);
    }
    timeoutId = setTimeout(function() {
      // Make $http call and $setValidity
      $http.get(url)
      .then(function(data) {
        ctrl.$setValidity('validateEmail', data.isValid);
      });
    }, 200);
  }
}

可以在处理ajax请求时禁用该按钮。您可以使用fieldset拥有类似的逻辑，也可以查看其字段集的手册。

function validate (value)
{
  ctrl.waitingForAjax = true; // disable the required part while waiting for the response      // Show as valid until proven invalid
  ctrl.$setValidity('validateEmail', true);
  // if there was a previous attempt, stop it.
  if(timeoutId) {
    clearTimeout(timeoutId);
  }
  timeoutId = setTimeout(function() {
    // Make $http call and $setValidity
    $http.get(url)
    .then(function(data) {
      ctrl.$setValidity('validateEmail', data.isValid);
      ctrl.waitingForAjax = false; // you can enable your button once you got the response
    });
  }, 200);
}

那么在你看来:

<button ng-disabled="waitingForAjax" ../>
相关文章：