快捷導(dǎo)航

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

更新時(shí)間：2015年01月27日 10:01:52 投稿：hebedich

這篇文章主要介紹了javascript將異步校驗(yàn)表單改寫為同步表單,需要的朋友可以參考下

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

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

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

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

校驗(yàn)工號(hào)

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

var BASE_PATH = '${rc.contextPath}';

var $workerIdInput = $('#workerIdInput');

var $workerIdError = $('#workerIdError');

//標(biāo)識(shí)用戶輸入的工號(hào)是否正確

var isWorkerIdCorrect = false;

var ERROR_WORKER_ID_IS_NULL = "員工工號(hào)不能為空";

var ERROR_WORKER_ID_IS_NOT_CORRECT = "請(qǐng)輸入有效的員工工號(hào)";

//顯示錯(cuò)誤信息

function showWorkerIdError(errorMessage) {

  $workerIdError.html(errorMessage);

  $workerIdError.show();

}

//隱藏錯(cuò)誤信息

$workerIdInput.on('keydown', function() {

  $workerIdError.hide();

});

//將上次輸入的工號(hào)保存起來

$workerIdInput.on('focus', function() {

  var workerId = $.trim($(this).val());

  $(this).data('before', workerId);

});

//blur時(shí)進(jìn)行校驗(yàn)

$workerIdInput.on('blur', function() {

  var workerId = $.trim($(this).val());

  //長度為0時(shí)，顯示工號(hào)為空的錯(cuò)誤信息

  if (!workerId.length) {

    showWorkerIdError(ERROR_WORKER_ID_IS_NULL);

    return false;

  }

  //若用戶當(dāng)前輸入的數(shù)據(jù)和上次輸入的數(shù)據(jù)一樣，則不調(diào)用后臺(tái)接口

  //假設(shè)用戶輸入123456，調(diào)用后臺(tái)接口，返回結(jié)果為，不正確的工號(hào)

  //用戶將輸入內(nèi)容進(jìn)行更改后，仍然為123456，則校驗(yàn)程序不會(huì)訪問網(wǎng)絡(luò)，直接顯示錯(cuò)誤信息

  if (workerId == $(this).data('before')) {

    if (!isWorkerIdCorrect) {

      showWorkerIdError(ERROR_WORKER_ID_IS_NOT_CORRECT);

    }

    return false;

  }

  //調(diào)用后臺(tái)接口，查詢此員工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的時(shí)候，我們的表單才能提交

  if (!isWorkerIdCorrect) {

    $workerIdInput.focus();

    return false;

  }

});

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

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

下面是修改后的代碼：

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

var BASE_PATH = '${rc.contextPath}';

var $workerIdInput = $('#workerIdInput');

var $workerIdError = $('#workerIdError');

//標(biāo)識(shí)用戶輸入的工號(hào)是否正確

var isWorkerIdCorrect = false;

//標(biāo)識(shí)后臺(tái)校驗(yàn)工號(hào)是否已完成（true: 為校驗(yàn)中, false: 校驗(yàn)沒開始或已結(jié)束）

var isWorkerIdLoading = false;

//標(biāo)識(shí)用戶是否提交了表單

var isSubmit = false;

var ERROR_WORKER_ID_IS_NULL = "員工工號(hào)不能為空";

var ERROR_WORKER_ID_IS_NOT_CORRECT = "請(qǐng)輸入有效的員工工號(hào)";

//顯示錯(cuò)誤信息

function showWorkerIdError(errorMessage) {

  $workerIdError.html(errorMessage);

  $workerIdError.show();

}

//隱藏錯(cuò)誤信息

$workerIdInput.on('keydown', function() {

  $workerIdError.hide();

});

//將上次輸入的工號(hào)保存起來

$workerIdInput.on('focus', function() {

  var workerId = $.trim($(this).val());

  $(this).data('before', workerId);

});

//blur時(shí)進(jìn)行校驗(yàn)

$workerIdInput.on('blur', function() {

  var workerId = $.trim($(this).val());

  //長度為0時(shí)，顯示工號(hào)為空的錯(cuò)誤信息

  if (!workerId.length) {

    showWorkerIdError(ERROR_WORKER_ID_IS_NULL);

    return false;

  }

  //若用戶當(dāng)前輸入的數(shù)據(jù)和上次輸入的數(shù)據(jù)一樣，則不調(diào)用后臺(tái)接口

  //假設(shè)用戶輸入123456，調(diào)用后臺(tái)接口，返回結(jié)果為，不正確的工號(hào)

  //用戶將輸入內(nèi)容進(jìn)行更改后，仍然為123456，則校驗(yàn)程序不會(huì)訪問網(wǎng)絡(luò)，直接顯示錯(cuò)誤信息

  if (workerId == $(this).data('before')) {

    if (!isWorkerIdCorrect) {

      showWorkerIdError(ERROR_WORKER_ID_IS_NOT_CORRECT);

    }

    return false;

  }

  //調(diào)用后臺(tái)接口，查詢此員工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ā)送請(qǐng)求前，標(biāo)識(shí)正在校驗(yàn)工號(hào)

      isWorkerIdLoading = true;

    },

    success: callback,

    complete: function() {

      //結(jié)束后，關(guān)閉標(biāo)識(shí)

      isWorkerIdLoading = false;

      //在后臺(tái)校驗(yàn)數(shù)據(jù)過程中，用戶若提交了表單，則在此自動(dòng)提交

      if (isSubmit) {

        $workerIdForm.submit();

      }

    }

  });

}

//回車提交表單

$workerIdInput.on('keypress', function(e) {

  if (e.which === 13) {

    $(this).blur();

    $workerIdForm.submit();

  }

});

$workerIdForm.on('submit', function() {

  //若正在后臺(tái)校驗(yàn)工號(hào)，則標(biāo)識(shí)用戶提交了表單

  if (isWorkerIdLoading) {

    isSubmit = true;

    return false;

  }

  if (!isWorkerIdCorrect) {

    $workerIdInput.focus();

    return false;

  }

});