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

2019-11-20 13:19:15

字體：大中小

供稿：網(wǎng)友

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

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

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

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

校驗(yàn)工號

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

var BASE_PATH = '${rc.contextPath}';
var $workerIdInput = $('#workerIdInput');
var $workerIdError = $('#workerIdError');
//標(biāo)識用戶輸入的工號是否正確
var isWorkerIdCorrect = false;
var ERROR_WORKER_ID_IS_NULL = "員工工號不能為空";
var ERROR_WORKER_ID_IS_NOT_CORRECT = "請輸入有效的員工工號";
//顯示錯誤信息
function showWorkerIdError(errorMessage) {
  $workerIdError.html(errorMessage);
  $workerIdError.show();
}
//隱藏錯誤信息
$workerIdInput.on('keydown', function() {
  $workerIdError.hide();
});
//將上次輸入的工號保存起來
$workerIdInput.on('focus', function() {
  var workerId = $.trim($(this).val());
  $(this).data('before', workerId);
});
//blur時進(jìn)行校驗(yàn)
$workerIdInput.on('blur', function() {
  var workerId = $.trim($(this).val());
  //長度為0時，顯示工號為空的錯誤信息
  if (!workerId.length) {
    showWorkerIdError(ERROR_WORKER_ID_IS_NULL);
    return false;
  }
  //若用戶當(dāng)前輸入的數(shù)據(jù)和上次輸入的數(shù)據(jù)一樣，則不調(diào)用后臺接口
  //假設(shè)用戶輸入123456，調(diào)用后臺接口，返回結(jié)果為，不正確的工號
  //用戶將輸入內(nèi)容進(jìn)行更改后，仍然為123456，則校驗(yàn)程序不會訪問網(wǎng)絡(luò)，直接顯示錯誤信息
  if (workerId == $(this).data('before')) {
    if (!isWorkerIdCorrect) {
      showWorkerIdError(ERROR_WORKER_ID_IS_NOT_CORRECT);
    }
    return false;
  }
  //調(diào)用后臺接口，查詢此員工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的時候，我們的表單才能提交
  if (!isWorkerIdCorrect) {
    $workerIdInput.focus();
    return false;
  }
});

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

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

下面是修改后的代碼：

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

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