javascript將異步校驗表單改寫為同步表單
同步表單校驗的缺點
響應(yīng)錯誤信息時,需要重新加載整個頁面(雖然有緩存,客戶端仍然需要通過http協(xié)議對比每個文件是否有更新,以保持文件最新)
服務(wù)器響應(yīng)錯誤以后,用戶之前所輸入的信息全部丟失了,用戶需要從頭開始填寫(部分瀏覽器幫我們緩存了這些數(shù)據(jù))
異步校驗表單的初衷
提升用戶體驗
最大化減少網(wǎng)絡(luò)請求,減輕服務(wù)器壓力
下面我們看一個常見的異步表單校驗(校驗工號在后臺是否存在,存在為有效工號)
校驗工號
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
下面是修改后的代碼:
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)文章
Javascript實現(xiàn)的常用算法(如冒泡、快速、鴿巢、奇偶等)
這篇文章主要介紹了Javascript實現(xiàn)的常用算法,如冒泡、快速、鴿巢、選擇、木桶、奇偶等,需要的朋友可以參考下2014-04-04Laydate時間組件在火狐瀏覽器下有多時間輸入框時只能給第一個輸入框賦值的解決方法
這篇文章主要介紹了Laydate時間組件在火狐瀏覽器下有多時間輸入框時只能給第一個輸入框賦值的解決方法,需要的朋友可以參考下2016-08-08微信小程序列表時間戳轉(zhuǎn)換實現(xiàn)過程解析
這篇文章主要介紹了微信小程序列表時間戳轉(zhuǎn)換實現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10