jQuery 验证，在继续之前等待服务调用响应

Question

我目前有一个 jQuery 方法来验证英国 phone 号码。这只会验证格式，并不能确保数字是真实的，所以我正在试用一个 telephone 验证服务。

下面的代码显示了 jQuery 验证方法，最后的 IsValid(phone_number, 'GB') 位调用一个函数来处理与服务。

jQuery.validator.addMethod('phonesUK', function(phone_number, element) {
phone_number = phone_number.replace(/\(|\)|\s+|-/g,'');
return this.optional(element) || phone_number.length > 8 &&
    phone_number.match(/^(?:(?:(?:00\s?|\+)44\s?|0)(?:1\d{8,9}|[23]\d{9}|8\d{7,9}|7(?:[45789]\d{8}|624\d{6})))$/)
    && IsValid(phone_number, 'GB');}, 'Please specify a valid UK phone number');

下面的代码处理调用该服务并独立运行。

function IsValid(telephoneNumber, defaultCountry)

{ 
  var internationaltelephonevalidation = new data8.internationaltelephonevalidation();
  internationaltelephonevalidation.isvalid(
    telephoneNumber,
    defaultCountry,
    [
      new data8.option('UseMobileValidation', 'true'),
      new data8.option('UseLineValidation', 'true')
    ],
    showIsValidResult
  );
}

function showIsValidResult(result) {
  if (!result.Status.Success) {
    alert('Error: ' + result.Status.ErrorMessage);
  }
  else {
    if(result.Result.ValidationResult == "Invalid"){
      return false;
    }else{
      return true;
    }
  }
}

我的问题是 jQuery 验证器方法 returns 在服务响应返回之前为假。

我确实尝试在 jQuery 方法中设置超时并在从 showIsValidResult() 函数返回之前设置一个变量，但该变量始终未定义。

有什么想法吗？

谢谢

Answer 1

internationaltelephonevalidation.isvalid 是一个异步 XHR 调用。它在 IsValid 函数中执行，但该函数不等待响应。相反，它只是 returns undefined 因为它是 JavaScript.

中的默认 return 语句

可以使用 $.Deferred object 重写 isValid 函数：

var funReady;

function IsValid(telephoneNumber, defaultCountry) {
  funReady = new $.Deferred();
  var internationaltelephonevalidation = new data8.internationaltelephonevalidation();
  internationaltelephonevalidation.isvalid(
    telephoneNumber,
    defaultCountry,
    [
      new data8.option('UseMobileValidation', 'true'),
      new data8.option('UseLineValidation', 'true')
    ],
    showIsValidResult
  );

  $.when(funReady).then(function() {
    // no action needed after $.Deferred is resolved/rejected.
    // just waiting for it to happen without leaving isValid
    // function ...
  });

  return funReady.state() === "resolved" ? true : false;
}


function showIsValidResult(result) {
  if (!result.Status.Success) { // http(s) request failed
    funReady.reject();
  }

  if(result.Result.ValidationResult == "Invalid") {
    funReady.reject();
  } else {
    funReady.resolve();
  }
}

延迟对象return是一个承诺。默认情况下，它的状态是 "pending"，这意味着既不是 "resolved"（成功）也不是 "rejected"（失败）。当承诺处于 "pending" 状态时，$.when() 函数等待其状态更改为 "resolved"/"rejected".

一旦异步 XHR 请求为 finished/failed，延迟状态将以编程方式更改。

此解决方案是一个演示。您应该考虑检查 $.Deferred 是否已创建，而不是为每个 isValid 调用重新创建新实例。此提案中可能还有其他边缘情况，但它应该可以帮助您找到正确的答案。

jQuery 验证，在继续之前等待服务调用响应

jQuery validation, waiting for service call response before proceeding

javascript

validation

jquery

web-services