javascript將異步校驗(yàn)表單改寫(xiě)為同步表單

2019-11-20 13:19:15

字體：大中小

供稿：網(wǎng)友

同步表單校驗(yàn)的缺點(diǎn)

響應(yīng)錯(cuò)誤信息時(shí)，需要重新加載整個(gè)頁(yè)面（雖然有緩存，客戶(hù)端仍然需要通過(guò)http協(xié)議對(duì)比每個(gè)文件是否有更新，以保持文件最新）
服務(wù)器響應(yīng)錯(cuò)誤以后，用戶(hù)之前所輸入的信息全部丟失了，用戶(hù)需要從頭開(kāi)始填寫(xiě)（部分瀏覽器幫我們緩存了這些數(shù)據(jù)）

異步校驗(yàn)表單的初衷

提升用戶(hù)體驗(yàn)
最大化減少網(wǎng)絡(luò)請(qǐng)求，減輕服務(wù)器壓力
下面我們看一個(gè)常見(jiàn)的異步表單校驗(yàn)（校驗(yàn)工號(hào)在后臺(tái)是否存在，存在為有效工號(hào)）

校驗(yàn)工號(hào)

復(fù)制代碼代碼如下:

var BASE_PATH = '${rc.contextPath}';
var $workerIdInput = $('#workerIdInput');
var $workerIdError = $('#workerIdError');
//標(biāo)識(shí)用戶(hù)輸入的工號(hào)是否正確
var isWorkerIdCorrect = false;
var ERROR_WORKER_ID_IS_NULL = "員工工號(hào)不能為空";
var ERROR_WORKER_ID_IS_NOT_CORRECT = "請(qǐng)輸入有效的員工工號(hào)";
//顯示錯(cuò)誤信息
function showWorkerIdError(errorMessage) {
  $workerIdError.html(errorMessage);
  $workerIdError.show();
}
//隱藏錯(cuò)誤信息
$workerIdInput.on('keydown', function() {
  $workerIdError.hide();
});
//將上次輸入的工號(hào)保存起來(lái)
$workerIdInput.on('focus', function() {
  var workerId = $.trim($(this).val());
  $(this).data('before', workerId);
});
//blur時(shí)進(jìn)行校驗(yàn)
$workerIdInput.on('blur', function() {
  var workerId = $.trim($(this).val());
  //長(zhǎng)度為0時(shí)，顯示工號(hào)為空的錯(cuò)誤信息
  if (!workerId.length) {
    showWorkerIdError(ERROR_WORKER_ID_IS_NULL);
    return false;
  }
  //若用戶(hù)當(dāng)前輸入的數(shù)據(jù)和上次輸入的數(shù)據(jù)一樣，則不調(diào)用后臺(tái)接口
  //假設(shè)用戶(hù)輸入123456，調(diào)用后臺(tái)接口，返回結(jié)果為，不正確的工號(hào)
  //用戶(hù)將輸入內(nèi)容進(jìn)行更改后，仍然為123456，則校驗(yàn)程序不會(huì)訪(fǎng)問(wèn)網(wǎng)絡(luò)，直接顯示錯(cuò)誤信息
  if (workerId == $(this).data('before')) {
    if (!isWorkerIdCorrect) {
      showWorkerIdError(ERROR_WORKER_ID_IS_NOT_CORRECT);
    }
    return false;
  }
  //調(diào)用后臺(tái)接口，查詢(xún)此員工id是否正確
  checkWorkerIdExists(workerId, function(data) {
    isWorkerIdCorrect = data.isWorkerIdExists;
    if (!isWorkerIdCorrect) {
      showWorkerIdError(ERROR_WORKER_ID_IS_NOT_CORRECT);
    }
  });
});
function checkWorkerIdExists(workerId, callback) {
  $.ajax({
    url: BASE_PATH + '/forgotPwd/checkWorkerIdExists.htm',
    data: {
      workerId: workerId
    },
    success: callback
  });
}
$workerIdForm.on('submit', function() {
  //只有服務(wù)器返回為true的時(shí)候，我們的表單才能提交
  if (!isWorkerIdCorrect) {
    $workerIdInput.focus();
    return false;
  }
});

上述代碼寫(xiě)完，一個(gè)輸入框的驗(yàn)證基本上搞定了。

我覺(jué)得還有影響用戶(hù)體驗(yàn)的地方
還不支持回車(chē)操作，oh my god，回車(chē)也要能提交表單
若用戶(hù)網(wǎng)速較慢，點(diǎn)擊提交按鈕，會(huì)沒(méi)有任何反映，因?yàn)閕sWorkerIdCorrect為false，只有服務(wù)器校驗(yàn)成功才為true

下面是修改后的代碼：

復(fù)制代碼代碼如下:

var BASE_PATH = '${rc.contextPath}';
var $workerIdInput = $('#workerIdInput');
var $workerIdError = $('#workerIdError');
//標(biāo)識(shí)用戶(hù)輸入的工號(hào)是否正確
var isWorkerIdCorrect = false;
//標(biāo)識(shí)后臺(tái)校驗(yàn)工號(hào)是否已完成（true: 為校驗(yàn)中, false: 校驗(yàn)沒(méi)開(kāi)始或已結(jié)束）
var isWorkerIdLoading = false;
//標(biāo)識(shí)用戶(hù)是否提交了表單
var isSubmit = false;
var ERROR_WORKER_ID_IS_NULL = "員工工號(hào)不能為空";
var ERROR_WORKER_ID_IS_NOT_CORRECT = "請(qǐng)輸入有效的員工工號(hào)";
//顯示錯(cuò)誤信息
function showWorkerIdError(errorMessage) {
  $workerIdError.html(errorMessage);
  $workerIdError.show();
}
//隱藏錯(cuò)誤信息
$workerIdInput.on('keydown', function() {
  $workerIdError.hide();
});
//將上次輸入的工號(hào)保存起來(lái)
$workerIdInput.on('focus', function() {
  var workerId = $.trim($(this).val());
  $(this).data('before', workerId);
});
//blur時(shí)進(jìn)行校驗(yàn)
$workerIdInput.on('blur', function() {
  var workerId = $.trim($(this).val());
  //長(zhǎng)度為0時(shí)，顯示工號(hào)為空的錯(cuò)誤信息
  if (!workerId.length) {
    showWorkerIdError(ERROR_WORKER_ID_IS_NULL);
    return false;
  }
  //若用戶(hù)當(dāng)前輸入的數(shù)據(jù)和上次輸入的數(shù)據(jù)一樣，則不調(diào)用后臺(tái)接口
  //假設(shè)用戶(hù)輸入123456，調(diào)用后臺(tái)接口，返回結(jié)果為，不正確的工號(hào)
  //用戶(hù)將輸入內(nèi)容進(jìn)行更改后，仍然為123456，則校驗(yàn)程序不會(huì)訪(fǎng)問(wèn)網(wǎng)絡(luò)，直接顯示錯(cuò)誤信息
  if (workerId == $(this).data('before')) {
    if (!isWorkerIdCorrect) {
      showWorkerIdError(ERROR_WORKER_ID_IS_NOT_CORRECT);
    }
    return false;
  }
  //調(diào)用后臺(tái)接口，查詢(xún)此員工id是否存在
  checkWorkerIdExists(workerId, function(data) {
    isWorkerIdCorrect = data.isWorkerIdExists;
    if (!isWorkerIdCorrect) {
      showWorkerIdError(ERROR_WORKER_ID_IS_NOT_CORRECT);
    }
  });
});
function checkWorkerIdExists(workerId, callback) {
  $.ajax({
    url: BASE_PATH + '/forgotPwd/checkWorkerIdExists.htm',
    data: {
      workerId: workerId
    },
    beforeSend: function() {
      //發(fā)送請(qǐng)求前，標(biāo)識(shí)正在校驗(yàn)工號(hào)
      isWorkerIdLoading = true;
    },
    success: callback,
    complete: function() {
      //結(jié)束后，關(guān)閉標(biāo)識(shí)
      isWorkerIdLoading = false;
      //在后臺(tái)校驗(yàn)數(shù)據(jù)過(guò)程中，用戶(hù)若提交了表單，則在此自動(dòng)提交
      if (isSubmit) {
        $workerIdForm.submit();
      }
    }
  });
}
//回車(chē)提交表單
$workerIdInput.on('keypress', function(e) {
  if (e.which === 13) {
    $(this).blur();
    $workerIdForm.submit();
  }
});
$workerIdForm.on('submit', function() {
  //若正在后臺(tái)校驗(yàn)工號(hào)，則標(biāo)識(shí)用戶(hù)提交了表單
  if (isWorkerIdLoading) {
    isSubmit = true;
    return false;
  }
  if (!isWorkerIdCorrect) {
    $workerIdInput.focus();
    return false;
  }
});