欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript將異步校驗表單改寫為同步表單

 更新時間:2015年01月27日 10:01:52   投稿:hebedich  
這篇文章主要介紹了javascript將異步校驗表單改寫為同步表單,需要的朋友可以參考下

同步表單校驗的缺點

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

異步校驗表單的初衷

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

校驗工號

復(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)行校驗
$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,則校驗程序不會訪問網(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;
  }
});

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

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

下面是修改后的代碼:

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

var BASE_PATH = '${rc.contextPath}';
var $workerIdInput = $('#workerIdInput');
var $workerIdError = $('#workerIdError');
//標(biāo)識用戶輸入的工號是否正確
var isWorkerIdCorrect = false;
//標(biāo)識后臺校驗工號是否已完成(true: 為校驗中, false: 校驗沒開始或已結(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)行校驗
$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,則校驗程序不會訪問網(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)識正在校驗工號
      isWorkerIdLoading = true;
    },
    success: callback,
    complete: function() {
      //結(jié)束后,關(guān)閉標(biāo)識
      isWorkerIdLoading = false;
      //在后臺校驗數(shù)據(jù)過程中,用戶若提交了表單,則在此自動提交
      if (isSubmit) {
        $workerIdForm.submit();
      }
    }
  });
}
//回車提交表單
$workerIdInput.on('keypress', function(e) {
  if (e.which === 13) {
    $(this).blur();
    $workerIdForm.submit();
  }
});
$workerIdForm.on('submit', function() {
  //若正在后臺校驗工號,則標(biāo)識用戶提交了表單
  if (isWorkerIdLoading) {
    isSubmit = true;
    return false;
  }
  if (!isWorkerIdCorrect) {
    $workerIdInput.focus();
    return false;
  }
});

最終效果,圖中2個輸入框均為異步校驗,但效果看起來和同步的一樣。
圖中使用了gprs網(wǎng)絡(luò)模擬網(wǎng)速較慢的情況

效果圖

相關(guān)文章

最新評論