Inconvénients de la vérification de la forme synchrone
Lorsque vous répondez au message d'erreur, la page entière doit être rechargée (bien qu'il existe un cache, le client doit toujours comparer si chaque fichier a des mises à jour via le protocole HTTP pour maintenir le fichier à jour)
Une fois que le serveur a répondu de manière incorrecte, toutes les informations saisies par l'utilisateur ont été perdues et l'utilisateur doit le remplir à partir de zéro (certains navigateurs nous ont aidés à mettre ces données)
L'intention initiale de la forme de vérification asynchrone
Améliorer l'expérience utilisateur
Maximiser et réduire les demandes du réseau et réduire la pression du serveur
Jetons un coup d'œil à une vérification commune de formulaire asynchrone (vérifiez si le numéro de travail existe en arrière-plan, et il existe en tant que numéro de travail valide)
Vérifiez le numéro de travail
La copie de code est la suivante:
var base_path = '$ {rc.ContextPath}';
var $ weartIdInput = $ ('# workerIdInput');
var $ workerIderror = $ ('# workiderorror');
// Identifiez si le numéro de travail saisi par l'utilisateur est correct
var isWorkeridCorrect = false;
var error_worker_id_is_null = "Le numéro de travail des employés ne peut pas être vide";
var error_worker_id_is_not_correct = "Veuillez saisir un numéro d'employé valide";
// Afficher le message d'erreur
fonction showworkeriderror (errorMessage) {
$ workIDerror.html (ErrorMessage);
$ wearchIderError.show ();
}
// masquer le message d'erreur
$ weartidinput.on ('keydown', function () {
$ workIDerror.hide ();
});
// Enregistrez le numéro de travail que vous avez entré la dernière fois
$ weartidinput.on ('focus', function () {
var workerId = $ .trim ($ (this) .val ());
$ (this) .data ('avant', wearchid);
});
// Calcul en cas de flou
$ weartidinput.on ('blur', function () {
var workerId = $ .trim ($ (this) .val ());
// Lorsque la longueur est 0, le message d'erreur avec le numéro de travail vide s'affiche
if (! workerId.length) {
showWorkeRiderror (error_worker_id_is_null);
retourne false;
}
// Si les données actuellement saisies par l'utilisateur sont les mêmes que les données entrées la dernière fois, l'interface d'arrière-plan ne sera pas appelée
// Supposons que l'utilisateur entre 123456 et appelle l'interface d'arrière-plan, et le résultat de retour est le numéro de travail incorrect
// Une fois que l'utilisateur a modifié le contenu d'entrée, il est toujours 123456, le programme de vérification n'accèdera pas au réseau et affichera directement le message d'erreur
if (workerId == $ (this) .data ('avant')) {
if (! isworkeridcorrect) {
showWorkeriderror (error_worker_id_is_not_correct);
}
retourne false;
}
// appelle l'interface d'arrière-plan pour vérifier si cet ID d'employé est correct
CheckWorkeridexists (WorkerId, fonction (données) {
isWorkeridCorrect = data.isworkeridexists;
if (! isworkeridcorrect) {
showWorkeriderror (error_worker_id_is_not_correct);
}
});
});
Fonction CheckWorkeridexists (WorkerId, rappel) {
$ .ajax ({
URL: base_path + '/forgotpwd/checkworkeridexists.htm',
données: {
WorkerID: WorkerId
},
Succès: rappel
});
}
$ wearchidform.on ('soumi', function () {
// Notre formulaire ne peut être soumis que lorsque le serveur renvoie True
if (! isworkeridcorrect) {
$ workingidinput.focus ();
retourne false;
}
});
Après avoir écrit le code ci-dessus, la vérification d'une boîte d'entrée est essentiellement effectuée.
Je pense qu'il y a certaines choses qui affectent l'expérience utilisateur
L'opération de retour du chariot n'est pas encore prise en charge. Oh mon Dieu, vous devez être en mesure de soumettre un formulaire si vous entrez.
Si la vitesse Internet de l'utilisateur est lente, cliquez sur le bouton Soumettre, il n'y aura pas de réponse, car IsWorkeridCorrect est faux, et ce ne sera vrai que si la vérification du serveur réussit.
Voici le code modifié:
La copie de code est la suivante:
var base_path = '$ {rc.ContextPath}';
var $ weartIdInput = $ ('# workerIdInput');
var $ workerIderror = $ ('# workiderorror');
// Identifiez si le numéro de travail saisi par l'utilisateur est correct
var isWorkeridCorrect = false;
// Identifiez le numéro de travail de vérification des anté
var isworkeridloading = false;
// Identifiez si l'utilisateur a soumis le formulaire
var issubmit = false;
var error_worker_id_is_null = "Le numéro de travail des employés ne peut pas être vide";
var error_worker_id_is_not_correct = "Veuillez saisir un numéro d'employé valide";
// Afficher le message d'erreur
fonction showworkeriderror (errorMessage) {
$ workIDerror.html (ErrorMessage);
$ wearchIderError.show ();
}
// masquer le message d'erreur
$ weartidinput.on ('keydown', function () {
$ workIDerror.hide ();
});
// Enregistrez le numéro de travail que vous avez entré la dernière fois
$ weartidinput.on ('focus', function () {
var workerId = $ .trim ($ (this) .val ());
$ (this) .data ('avant', wearchid);
});
// Calcul en cas de flou
$ weartidinput.on ('blur', function () {
var workerId = $ .trim ($ (this) .val ());
// Lorsque la longueur est 0, le message d'erreur avec le numéro de travail vide s'affiche
if (! workerId.length) {
showWorkeRiderror (error_worker_id_is_null);
retourne false;
}
// Si les données actuellement saisies par l'utilisateur sont les mêmes que les données entrées la dernière fois, l'interface d'arrière-plan ne sera pas appelée
// Supposons que l'utilisateur entre 123456 et appelle l'interface d'arrière-plan, et le résultat de retour est le numéro de travail incorrect
// Une fois que l'utilisateur a modifié le contenu d'entrée, il est toujours 123456, le programme de vérification n'accèdera pas au réseau et affichera directement le message d'erreur
if (workerId == $ (this) .data ('avant')) {
if (! isworkeridcorrect) {
showWorkeriderror (error_worker_id_is_not_correct);
}
retourne false;
}
// appelle l'interface d'arrière-plan pour vérifier si cet ID d'employé existe
CheckWorkeridexists (WorkerId, fonction (données) {
isWorkeridCorrect = data.isworkeridexists;
if (! isworkeridcorrect) {
showWorkeriderror (error_worker_id_is_not_correct);
}
});
});
Fonction CheckWorkeridexists (WorkerId, rappel) {
$ .ajax ({
URL: base_path + '/forgotpwd/checkworkeridexists.htm',
données: {
WorkerID: WorkerId
},
beforesend: function () {
// Avant d'envoyer la demande, le numéro de travail est en cours de vérification.
isWorkEridloading = true;
},
Succès: rappel,
complet: function () {
// Après la fin, fermez le logo
isWorkeridloading = false;
// Dans le processus de vérification des antécédents, si l'utilisateur soumet un formulaire, il le soumettra automatiquement ici.
if (issubmit) {
$ wearchIdForm.Submit ();
}
}
});
}
// Entrez soumettre le formulaire
$ weartidinput.on ('keypress', fonction (e) {
if (e.which === 13) {
$ (this) .blur ();
$ wearchIdForm.Submit ();
}
});
$ wearchidform.on ('soumi', function () {
// Si le numéro de travail est vérifié en arrière-plan, il sera identifié que l'utilisateur a soumis le formulaire
if (isworkeridloading) {
issutuMt = true;
retourne false;
}
if (! isworkeridcorrect) {
$ workingidinput.focus ();
retourne false;
}
});
Dans l'effet final, les deux boîtes d'entrée de la figure sont une vérification asynchrone, mais l'effet ressemble à la même chose que synchrone.
Le réseau GPRRS est utilisé dans la figure pour simuler une vitesse de réseau lente
Diagramme de reproduction