javascript將非同步校正表單改寫為同步表單，javascript校正

javascript將非同步校正表單改寫為同步表單，javascript校正

同步表單校正的缺點

響應錯誤資訊時，需要重新載入整個頁面（雖然有緩衝，用戶端仍然需要通過http協議對比每個檔案是否有更新，以保持檔案最新）
伺服器響應錯誤以後，使用者之前所輸入的資訊全部丟失了，使用者需要從頭開始填寫（部分瀏覽器幫我們緩衝了這些資料）

非同步校正表單的初衷

提升使用者體驗
最大化減少網路請求，減輕伺服器壓力
下面我們看一個常見的非同步表單校正（校正工號在後台是否存在，存在為有效工號）

校正工號

複製代碼 代碼如下:
var BASE_PATH = '${rc.contextPath}';
var $workerIdInput = $('#workerIdInput');
var $workerIdError = $('#workerIdError');
//標識使用者輸入的工號是否正確
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時進行校正
$workerIdInput.on('blur', function() {
  var workerId = $.trim($(this).val());
  //長度為0時，顯示工號為空白的錯誤資訊
  if (!workerId.length) {
    showWorkerIdError(ERROR_WORKER_ID_IS_NULL);
    return false;
  }
  //若使用者當前輸入的資料和上次輸入的資料一樣，則不調用後台介面
  //假設使用者輸入123456，調用後台介面，返回結果為，不正確的工號
  //使用者將輸入內容變更後，仍然為123456，則校正程式不會訪問網路，直接顯示錯誤資訊
  if (workerId == $(this).data('before')) {
    if (!isWorkerIdCorrect) {
      showWorkerIdError(ERROR_WORKER_ID_IS_NOT_CORRECT);
    }
    return false;
  }
  //調用後台介面，查詢此員工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() {
  //只有伺服器返回為true的時候，我們的表單才能提交
  if (!isWorkerIdCorrect) {
    $workerIdInput.focus();
    return false;
  }
});

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

我覺得還有影響使用者體驗的地方
還不支援斷行符號操作，oh my god，斷行符號也要能提交表單
若使用者網速較慢，點擊提交按鈕，會沒有任何反映，因為isWorkerIdCorrect為false，只有伺服器校正成功才為true

下面是修改後的代碼：

複製代碼 代碼如下:
var BASE_PATH = '${rc.contextPath}';
var $workerIdInput = $('#workerIdInput');
var $workerIdError = $('#workerIdError');
//標識使用者輸入的工號是否正確
var isWorkerIdCorrect = false;
//標識後台校正工號是否已完成（true: 為校正中, false: 校正沒開始或已結束）
var isWorkerIdLoading = false;
//標識使用者是否提交了表單
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時進行校正
$workerIdInput.on('blur', function() {
  var workerId = $.trim($(this).val());
  //長度為0時，顯示工號為空白的錯誤資訊
  if (!workerId.length) {
    showWorkerIdError(ERROR_WORKER_ID_IS_NULL);
    return false;
  }
  //若使用者當前輸入的資料和上次輸入的資料一樣，則不調用後台介面
  //假設使用者輸入123456，調用後台介面，返回結果為，不正確的工號
  //使用者將輸入內容變更後，仍然為123456，則校正程式不會訪問網路，直接顯示錯誤資訊
  if (workerId == $(this).data('before')) {
    if (!isWorkerIdCorrect) {
      showWorkerIdError(ERROR_WORKER_ID_IS_NOT_CORRECT);
    }
    return false;
  }
  //調用後台介面，查詢此員工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() {
      //發送請求前，標識正在校正工號
      isWorkerIdLoading = true;
    },
    success: callback,
    complete: function() {
      //結束後，關閉標識
      isWorkerIdLoading = false;
      //在後台校正資料過程中，使用者若提交了表單，則在此自動認可
      if (isSubmit) {
        $workerIdForm.submit();
      }
    }
  });
}
//斷行符號提交表單
$workerIdInput.on('keypress', function(e) {
  if (e.which === 13) {
    $(this).blur();
    $workerIdForm.submit();
  }
});
$workerIdForm.on('submit', function() {
  //若正在後台校正工號，則標識使用者提交了表單
  if (isWorkerIdLoading) {
    isSubmit = true;
    return false;
  }
  if (!isWorkerIdCorrect) {
    $workerIdInput.focus();
    return false;
  }
});

最終效果，圖中2個輸入框均為非同步校正，但效果看起來和同步的一樣。
圖中使用了gprs網路類比網速較慢的情況