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;  }});