Disadvantages of synchronous form verification
When responding to the error message, the entire page needs to be reloaded (although there is a cache, the client still needs to compare whether each file has updates through the http protocol to keep the file up to date)
After the server responds incorrectly, all the information entered by the user was lost, and the user needs to fill in it from scratch (some browsers have helped us cache this data)
The original intention of asynchronous verification form
Improve user experience
Maximize and reduce network requests and reduce server pressure
Let's take a look at a common asynchronous form verification (check whether the work number exists in the background, and it exists as a valid work number)
Verify the work number
The code copy is as follows:
var BASE_PATH = '${rc.contextPath}';
var $workerIdInput = $('#workerIdInput');
var $workerIdError = $('#workerIdError');
//Identify whether the work number entered by the user is correct
var isWorkerIdCorrect = false;
var ERROR_WORKER_ID_IS_NULL = "Employee work number cannot be empty";
var ERROR_WORKER_ID_IS_NOT_CORRECT = "Please enter a valid employee number";
//Show error message
function showWorkerIdError(errorMessage) {
$workerIdError.html(errorMessage);
$workerIdError.show();
}
//Hide error message
$workerIdInput.on('keydown', function() {
$workerIdError.hide();
});
//Save the work number you entered last time
$workerIdInput.on('focus', function() {
var workerId = $.trim($(this).val());
$(this).data('before', workerId);
});
//Calculating when blur
$workerIdInput.on('blur', function() {
var workerId = $.trim($(this).val());
// When the length is 0, the error message with the work number empty is displayed
if (!workerId.length) {
showWorkerIdError(ERROR_WORKER_ID_IS_NULL);
return false;
}
//If the data currently entered by the user is the same as the data entered last time, the background interface will not be called
//Suppose the user enters 123456 and calls the background interface, and the return result is, the incorrect work number
//After the user changes the input content, it is still 123456, the verification program will not access the network and directly display the error message
if (workerId == $(this).data('before')) {
if (!isWorkerIdCorrect) {
showWorkerIdError(ERROR_WORKER_ID_IS_NOT_CORRECT);
}
return false;
}
//Calling the background interface to check whether this employee ID is correct
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() {
//Our form can be submitted only when the server returns true
if (!isWorkerIdCorrect) {
$workerIdInput.focus();
return false;
}
});
After writing the above code, the verification of an input box is basically done.
I think there are some things that affect the user experience
Carriage return operation is not supported yet. Oh my god, you must be able to submit a form if you enter.
If the user's Internet speed is slow, click the submit button, there will be no response, because isWorkerIdCorrect is false, and it will be true only if the server verification is successful.
Here is the modified code:
The code copy is as follows:
var BASE_PATH = '${rc.contextPath}';
var $workerIdInput = $('#workerIdInput');
var $workerIdError = $('#workerIdError');
//Identify whether the work number entered by the user is correct
var isWorkerIdCorrect = false;
//Identify the background verification work number has been completed (true: is checking, false: The verification has not started or ended)
var isWorkerIdLoading = false;
//Identify whether the user has submitted the form
var isSubmit = false;
var ERROR_WORKER_ID_IS_NULL = "Employee work number cannot be empty";
var ERROR_WORKER_ID_IS_NOT_CORRECT = "Please enter a valid employee number";
//Show error message
function showWorkerIdError(errorMessage) {
$workerIdError.html(errorMessage);
$workerIdError.show();
}
//Hide error message
$workerIdInput.on('keydown', function() {
$workerIdError.hide();
});
//Save the work number you entered last time
$workerIdInput.on('focus', function() {
var workerId = $.trim($(this).val());
$(this).data('before', workerId);
});
//Calculating when blur
$workerIdInput.on('blur', function() {
var workerId = $.trim($(this).val());
// When the length is 0, the error message with the work number empty is displayed
if (!workerId.length) {
showWorkerIdError(ERROR_WORKER_ID_IS_NULL);
return false;
}
//If the data currently entered by the user is the same as the data entered last time, the background interface will not be called
//Suppose the user enters 123456 and calls the background interface, and the return result is, the incorrect work number
//After the user changes the input content, it is still 123456, the verification program will not access the network and directly display the error message
if (workerId == $(this).data('before')) {
if (!isWorkerIdCorrect) {
showWorkerIdError(ERROR_WORKER_ID_IS_NOT_CORRECT);
}
return false;
}
//Calling the background interface to check whether this employee ID exists
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() {
//Before sending the request, the work number is being checked.
isWorkerIdLoading = true;
},
success: callback,
complete: function() {
//After end, close the logo
isWorkerIdLoading = false;
//In the background verification process, if the user submits a form, he will submit it automatically here.
if (isSubmit) {
$workerIdForm.submit();
}
}
});
}
//Enter submit the form
$workerIdInput.on('keypress', function(e) {
if (e.which === 13) {
$(this).blur();
$workerIdForm.submit();
}
});
$workerIdForm.on('submit', function() {
//If the work number is being checked in the background, it will be identified that the user has submitted the form
if (isWorkerIdLoading) {
isSubmit = true;
return false;
}
if (!isWorkerIdCorrect) {
$workerIdInput.focus();
return false;
}
});
In the final effect, the two input boxes in the figure are asynchronous verification, but the effect looks the same as synchronous.
The GPRRS network is used in the figure to simulate a slow network speed
Reproduction diagram