JavaScript rewrites asynchronous checksum forms as synchronous forms _javascript tips

Disadvantages of Synchronizing form checksums

In response to the error message, the entire page needs to be reloaded (although there is a cache, the client still needs to compare each file with the HTTP protocol to keep the file up to date)
After the server responds to the error, all the information entered by the user has been lost and the user needs to fill it out from scratch (some browsers have cached the data for us).

The original intention of validating a form asynchronously

Enhance the user experience
Minimize network requests and reduce server pressure
Here we look at a common asynchronous form checksum (check the number in the background exists, exists as a valid work number)

Check work number

Copy Code code as follows:

var base_path = ' ${rc.contextpath} ';
var $workerIdInput = $ (' #workerIdInput ');
var $workerIdError = $ (' #workerIdError ');
Identifies whether the user entered the correct work number
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 work number";
Display error messages
function Showworkeriderror (errormessage) {
$workerIdError. HTML (errormessage);
$workerIdError. Show ();
}
Hide error messages
$workerIdInput. On (' KeyDown ', function () {
$workerIdError. Hide ();
});
Save the last work number you entered
$workerIdInput. On (' Focus ', function () {
var Workerid = $.trim ($ (this). Val ());
$ (this). Data (' before ', Workerid);
});
Check when Blur
$workerIdInput. On (' Blur ', function () {
var Workerid = $.trim ($ (this). Val ());
An error message with a length of 0 o'clock indicating that the work number is empty
if (!workerid.length) {
Showworkeriderror (Error_worker_id_is_null);
return false;
}
If the user currently enters the same data as the last data entered, the backend interface is not invoked
Suppose the user enters 123456, calls the backend interface, returns the result, incorrect work number
When the user changes the input, still 123456, the validator does not access the network and displays the error message directly
if (Workerid = = $ (this). Data (' before ')) {
if (!isworkeridcorrect) {
Showworkeriderror (Error_worker_id_is_not_correct);
}
return false;
}
Call the background interface to inquire if 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 () {
Only when the server returns true does our form submit
if (!isworkeridcorrect) {
$workerIdInput. focus ();
return false;
}
});

The above code is written, an input box verification is basically done.

And I think there's a place that affects the user experience.
Carriage return operation is not supported, oh my God, enter also to be able to submit the form
If the user's network speed is slow, click the Submit button, there will be no reflection, because Isworkeridcorrect is false, only the server verifies the success of True

Here is the modified code:

Copy Code code as follows:

var base_path = ' ${rc.contextpath} ';
var $workerIdInput = $ (' #workerIdInput ');
var $workerIdError = $ (' #workerIdError ');
Identifies whether the user entered the correct work number
var isworkeridcorrect = false;
Identifies whether the background check work number is complete (true: in checksum, false: checksum is not started or closed)
var isworkeridloading = false;
Identifies whether the user 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 work number";
Display error messages
function Showworkeriderror (errormessage) {
$workerIdError. HTML (errormessage);
$workerIdError. Show ();
}
Hide error messages
$workerIdInput. On (' KeyDown ', function () {
$workerIdError. Hide ();
});
Save the last work number you entered
$workerIdInput. On (' Focus ', function () {
var Workerid = $.trim ($ (this). Val ());
$ (this). Data (' before ', Workerid);
});
Check when Blur
$workerIdInput. On (' Blur ', function () {
var Workerid = $.trim ($ (this). Val ());
An error message with a length of 0 o'clock indicating that the work number is empty
if (!workerid.length) {
Showworkeriderror (Error_worker_id_is_null);
return false;
}
If the user currently enters the same data as the last data entered, the backend interface is not invoked
Suppose the user enters 123456, calls the backend interface, returns the result, incorrect work number
When the user changes the input, still 123456, the validator does not access the network and displays the error message directly
if (Workerid = = $ (this). Data (' before ')) {
if (!isworkeridcorrect) {
Showworkeriderror (Error_worker_id_is_not_correct);
}
return false;
}
Call the background interface to inquire if 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 () {
The identification is verifying the work number before sending the request
Isworkeridloading = true;
},
Success:callback,
Complete:function () {
When you are finished, turn off the identity
Isworkeridloading = false;
When the user submits a form in the background to verify the data, it automatically submits
if (issubmit) {
$workerIdForm. Submit ();
}
}
});
}
Carriage return Submit 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, the user submits the form
if (isworkeridloading) {
Issubmit = true;
return false;
}
if (!isworkeridcorrect) {
$workerIdInput. focus ();
return false;
}
});

The final effect, the 2 input boxes in the figure are asynchronous checksums, but the effect looks the same as synchronized.
The graph uses the GPRS network to simulate the slow speed situation

Effect chart