Недостатки проверки синхронной формы
При ответе на сообщение об ошибке вся страница должна быть перезагружена (хотя есть кэш, клиенту все еще нужно сравнить, есть ли каждый файл обновления через протокол HTTP, чтобы поддерживать файл в курсе)
После того, как сервер отвечает неправильно, вся информация, введенная пользователем, была потеряна, и пользователь должен заполнить его с нуля (некоторые браузеры помогли нам кэшировать эти данные)
Первоначальное намерение асинхронной формы проверки
Улучшить пользовательский опыт
Максимизировать и уменьшить сетевые запросы и снизить давление сервера
Давайте посмотрим на общую асинхронную проверку формы (проверьте, существует ли рабочий номер в фоновом режиме, и он существует как действительный рабочий номер)
Проверьте рабочий номер
Кода -копия выглядит следующим образом:
var base_path = '$ {rc.contextPath}';
var $ corkeridinput = $ ('#konaleridinput');
var $ corkeriderror = $ ('#corkeriderror');
// Определите, правильным ли рабочий номер, введенный пользователем
var isWorkerIdCorrect = false;
var error_worker_id_is_null = "Рабочий номер сотрудника не может быть пустым";
var error_worker_id_is_not_correct = "Пожалуйста, введите действительный номер сотрудника";
// Показать сообщение об ошибке
Function ShowWorkerIderRor (ErrorMessage) {
$ corkeriderror.html (errormessage);
$ corkeriderror.show ();
}
// скрыть сообщение об ошибке
$ corkeridinput.on ('keydown', function () {
$ corkeriderror.hide ();
});
// Сохранить рабочий номер, который вы ввели в прошлый раз
$ corkeridinput.on ('Focus', function () {
var Workerid = $ .Trim ($ (this) .val ());
$ (this) .data ('до', keorerid);
});
// расчет при размытии
$ corkeridinput.on ('blur', function () {
var Workerid = $ .Trim ($ (this) .val ());
// Когда длина равен 0, отображается сообщение об ошибке с рабочим номером.
if (! kayerid.length) {
ShowWorkerIderRor (error_worker_id_is_null);
вернуть ложь;
}
// Если данные, введенные в настоящее время пользователем, такие же, как и данные, введенные в прошлый раз, фоновый интерфейс не будет вызван
// Предположим, что пользователь входит 123456 и вызывает фоновый интерфейс, и результат возврата - неверный рабочий номер
// После того, как пользователь изменит входное содержимое, он все еще остается 123456, программа проверки не будет получать доступ к сети и напрямую отображать сообщение об ошибке
if (работник == $ (this) .data ('до')) {
if (! isWorkerIdCorrect) {
ShowWorkerIderRor (ERROR_WORKER_ID_IS_NOT_CORRECT);
}
вернуть ложь;
}
// вызов фонового интерфейса, чтобы проверить, является ли этот идентификатор сотрудника правильным
CheckWorkerIdexists (Workerid, Function (data) {
isWorkerIdCorrect = data.isWorkerIdexists;
if (! isWorkerIdCorrect) {
ShowWorkerIderRor (ERROR_WORKER_ID_IS_NOT_CORRECT);
}
});
});
Функция проверка -работоспособности (работник, обратный вызов) {
$ .ajax ({
URL: base_path + '/forgotpwd/checkworkeridexists.htm',
данные: {
Рабочий: работник
},
Успех: обратный вызов
});
}
$ corkeriDform.on ('supper', function () {
// наша форма может быть отправлена только при возвращении сервера
if (! isWorkerIdCorrect) {
$ corkeridinput.focus ();
вернуть ложь;
}
});
После написания вышеуказанного кода проверка блока ввода в основном выполнена.
Я думаю, что есть некоторые вещи, которые влияют на пользовательский опыт
Операция возврата перевозки еще не поддерживается. Боже мой, вы должны быть в состоянии отправить форму, если введете.
Если скорость интернета пользователя медленная, нажмите кнопку «Отправить», ответа не будет, потому что isWorkerIdCorrect является ложным, и это будет правдой, только если проверка сервера будет успешной.
Вот измененный код:
Кода -копия выглядит следующим образом:
var base_path = '$ {rc.contextPath}';
var $ corkeridinput = $ ('#konaleridinput');
var $ corkeriderror = $ ('#corkeriderror');
// Определите, правильным ли рабочий номер, введенный пользователем
var isWorkerIdCorrect = false;
// Определите номер проверки фоновой проверки.
var isWorkerIdguling = false;
// Определите, отправил ли пользователь форму
var Issubmit = false;
var error_worker_id_is_null = "Рабочий номер сотрудника не может быть пустым";
var error_worker_id_is_not_correct = "Пожалуйста, введите действительный номер сотрудника";
// Показать сообщение об ошибке
Function ShowWorkerIderRor (ErrorMessage) {
$ corkeriderror.html (errormessage);
$ corkeriderror.show ();
}
// скрыть сообщение об ошибке
$ corkeridinput.on ('keydown', function () {
$ corkeriderror.hide ();
});
// Сохранить рабочий номер, который вы ввели в прошлый раз
$ corkeridinput.on ('Focus', function () {
var Workerid = $ .Trim ($ (this) .val ());
$ (this) .data ('до', keorerid);
});
// расчет при размытии
$ corkeridinput.on ('blur', function () {
var Workerid = $ .Trim ($ (this) .val ());
// Когда длина равен 0, отображается сообщение об ошибке с рабочим номером.
if (! kayerid.length) {
ShowWorkerIderRor (error_worker_id_is_null);
вернуть ложь;
}
// Если данные, введенные в настоящее время пользователем, такие же, как и данные, введенные в прошлый раз, фоновый интерфейс не будет вызван
// Предположим, что пользователь входит 123456 и вызывает фоновый интерфейс, и результат возврата - неверный рабочий номер
// После того, как пользователь изменит входное содержимое, он все еще остается 123456, программа проверки не будет получать доступ к сети и напрямую отображать сообщение об ошибке
if (работник == $ (this) .data ('до')) {
if (! isWorkerIdCorrect) {
ShowWorkerIderRor (ERROR_WORKER_ID_IS_NOT_CORRECT);
}
вернуть ложь;
}
// вызов фонового интерфейса, чтобы проверить, существует ли этот идентификатор сотрудника
CheckWorkerIdexists (Workerid, Function (data) {
isWorkerIdCorrect = data.isWorkerIdexists;
if (! isWorkerIdCorrect) {
ShowWorkerIderRor (ERROR_WORKER_ID_IS_NOT_CORRECT);
}
});
});
Функция проверка -работоспособности (работник, обратный вызов) {
$ .ajax ({
URL: base_path + '/forgotpwd/checkworkeridexists.htm',
данные: {
Рабочий: работник
},
beforesend: function () {
// Перед отправкой запроса проверяется рабочий номер.
isWorkerIdguling = true;
},
Успех: обратный вызов,
завершено: function () {
// после конца закройте логотип
isWorkerIdguling = false;
// В процессе проверки фоновой проверки, если пользователь подает форму, он отправит ее автоматически.
if (issubmit) {
$ corkerIdform.submit ();
}
}
});
}
// Введите Отправить форму
$ corkeridinput.on ('keypress', function (e) {
if (e.which === 13) {
$ (this) .blur ();
$ corkerIdform.submit ();
}
});
$ corkeriDform.on ('supper', function () {
// Если рабочий номер проверяется в фоновом режиме, будет определено, что пользователь представил форму
if (isWorkerIdguling) {
Issubmit = true;
вернуть ложь;
}
if (! isWorkerIdCorrect) {
$ corkeridinput.focus ();
вернуть ложь;
}
});
В последнем эффекте два входных ящика на рисунке являются асинхронной проверкой, но эффект выглядит так же, как синхронно.
Сеть GPRRS используется на рисунке для моделирования медленной скорости сети
Диаграмма воспроизведения