javascript將異步校驗(yàn)表單改寫(xiě)為同步表單
更新時(shí)間：2015年01月27日 10:01:52 投稿：hebedich
這篇文章主要介紹了javascript將異步校驗(yàn)表單改寫(xiě)為同步表單,需要的朋友可以參考下
同步表單校驗(yàn)的缺點(diǎn)
響應(yīng)錯(cuò)誤信息時(shí)，需要重新加載整個(gè)頁(yè)面（雖然有緩存，客戶端仍然需要通過(guò)http協(xié)議對(duì)比每個(gè)文件是否有更新，以保持文件最新）
服務(wù)器響應(yīng)錯(cuò)誤以后，用戶之前所輸入的信息全部丟失了，用戶需要從頭開(kāi)始填寫(xiě)（部分瀏覽器幫我們緩存了這些數(shù)據(jù)）
異步校驗(yàn)表單的初衷
提升用戶體驗(yàn)
最大化減少網(wǎng)絡(luò)請(qǐng)求，減輕服務(wù)器壓力
下面我們看一個(gè)常見(jiàn)的異步表單校驗(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)保存起來(lái)
$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());
//長(zhǎng)度為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èn)網(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;
}
});
上述代碼寫(xiě)完，一個(gè)輸入框的驗(yàn)證基本上搞定了。
我覺(jué)得還有影響用戶體驗(yàn)的地方
還不支持回車(chē)操作，oh my god，回車(chē)也要能提交表單
若用戶網(wǎng)速較慢，點(diǎn)擊提交按鈕，會(huì)沒(méi)有任何反映，因?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)沒(méi)開(kāi)始或已結(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)保存起來(lái)
$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());
//長(zhǎng)度為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èn)網(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ù)過(guò)程中，用戶若提交了表單，則在此自動(dòng)提交
if (isSubmit) {
$workerIdForm.submit();
}
}
});
}
//回車(chē)提交表單
$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;
}
});
最終效果，圖中2個(gè)輸入框均為異步校驗(yàn)，但效果看起來(lái)和同步的一樣。
圖中使用了gprs網(wǎng)絡(luò)模擬網(wǎng)速較慢的情況
效果圖
相關(guān)文章
怎樣用JavaScript實(shí)現(xiàn)原型模式
這篇文章主要介紹了怎樣用JavaScript實(shí)現(xiàn)原型模式，想學(xué)習(xí)設(shè)計(jì)模式的同學(xué)，可以參考下2021-04-04
Javascript實(shí)現(xiàn)的常用算法（如冒泡、快速、鴿巢、奇偶等）
這篇文章主要介紹了Javascript實(shí)現(xiàn)的常用算法,如冒泡、快速、鴿巢、選擇、木桶、奇偶等,需要的朋友可以參考下2014-04-04
javascript實(shí)現(xiàn)的簡(jiǎn)單的表單驗(yàn)證
這篇文章主要介紹了javascript實(shí)現(xiàn)的簡(jiǎn)單的表單驗(yàn)證的相關(guān)資料,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了微信小程序canvas拖拽、截圖組件功能,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
Laydate時(shí)間組件在火狐瀏覽器下有多時(shí)間輸入框時(shí)只能給第一個(gè)輸入框賦值的解決方法
這篇文章主要介紹了Laydate時(shí)間組件在火狐瀏覽器下有多時(shí)間輸入框時(shí)只能給第一個(gè)輸入框賦值的解決方法,需要的朋友可以參考下2016-08-08
JS特效實(shí)現(xiàn)圖片自動(dòng)播放并可控的效果
這篇文章主要介紹了JS代碼實(shí)現(xiàn)圖片自動(dòng)播放并可控的效果,需要的朋友可以參考下2015-07-07
Javascript函數(shù)式編程簡(jiǎn)單介紹
什么是函數(shù)式編程？根據(jù)百度百科的描述，“函數(shù)式編程是種編程典范，它將電腦運(yùn)算視為函數(shù)的計(jì)算。函數(shù)編程語(yǔ)言最重要的基礎(chǔ)是 λ 演算（lambda calculus）。而且λ演算的函數(shù)可以接受函數(shù)當(dāng)作輸入（參數(shù)）和輸出（返回值）?！?/div> 2015-10-10
微信小程序列表時(shí)間戳轉(zhuǎn)換實(shí)現(xiàn)過(guò)程解析
這篇文章主要介紹了微信小程序列表時(shí)間戳轉(zhuǎn)換實(shí)現(xiàn)過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
js css 實(shí)現(xiàn)遮罩層覆蓋其他頁(yè)面元素附圖
實(shí)現(xiàn)遮罩層的方法有很多，但大多都是使用js css來(lái)實(shí)現(xiàn)的，本例也實(shí)現(xiàn)一個(gè)，效果還不錯(cuò)，喜歡的朋友可以感受下2014-09-09
javascript原始值和對(duì)象引用實(shí)例分析
這篇文章主要介紹了javascript原始值和對(duì)象引用的方法,實(shí)例分析了javascript原始值和對(duì)象引用的功能、定義與相關(guān)技巧,需要的朋友可以參考下2015-04-04最新評(píng)論