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網路模擬網速較慢的情況

效果圖