同期フォーム検証の短所
エラーメッセージに応答する場合、ページ全体をリロードする必要があります（キャッシュがありますが、クライアントは各ファイルがHTTPプロトコルを介して更新しているかどうかを比較する必要があります。
サーバーが誤って応答した後、ユーザーが入力したすべての情報が失われ、ユーザーがゼロから入力する必要があります（一部のブラウザはこのデータのキャッシュに役立ちました）
非同期検証フォームの元の意図
ユーザーエクスペリエンスを改善します
ネットワーク要求を最大化および削減し、サーバーの圧力を軽減します
一般的な非同期形式の検証を見てみましょう（仕事番号が背景に存在するかどうかを確認し、有効な作業番号として存在するかどうかを確認してください）
作業番号を確認します
コードコピーは次のとおりです。
var base_path = '$ {rc.contextpath}';
var $ workeridinput = $（ '＃workeridinput'）;
var $ workeriderror = $（ '＃workeriderror'）;
//ユーザーが入力した作業番号が正しいかどうかを特定する
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）;
}）;
//ぼかして計算します
$ workeridinput.on（ 'Blur'、function（）{
var WorkerId = $ .trim（$（this）.val（））;
//長さが0の場合、作業番号が空のエラーメッセージが表示されます
if（！workerid.length）{
showworkeriderror（error_worker_id_is_null）;
falseを返します。
}
//ユーザーが現在入力したデータが前回入力されたデータと同じである場合、バックグラウンドインターフェイスは呼び出されません
//ユーザーが123456に入力してバックグラウンドインターフェイスを呼び出すと仮定します。
//ユーザーが入力コンテンツを変更した後、それでも123456であり、検証プログラムはネットワークにアクセスせず、エラーメッセージを直接表示します
if（workerid == $（this）.data（ 'before'））{
if（！isworkeridcorrect）{
showworkeriderror（error_worker_id_is_not_correct）;
}
falseを返します。
}
//背景インターフェイスを呼び出して、この従業員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'、
データ： {
workerid：workerid
}、
成功：コールバック
}）;
}
$ workeridform.on（ 'submit'、function（）{
//サーバーがtrueを返す場合にのみフォームを送信できます
if（！isworkeridcorrect）{
$ workeridinput.focus（）;
falseを返します。
}
}）;
上記のコードを記述した後、入力ボックスの検証は基本的に行われます。
ユーザーエクスペリエンスに影響を与えるものがいくつかあると思います
キャリッジリターン操作はまだサポートされていません。なんてこった、あなたが入るとフォームを提出できる必要があります。
ユーザーのインターネット速度が遅い場合は、[送信]ボタンをクリックします。応答はありません。WorkerIdCorrectがfalseであり、サーバーの確認が成功した場合にのみ当てはまります。
これが変更されたコードです：
コードコピーは次のとおりです。
var base_path = '$ {rc.contextpath}';
var $ workeridinput = $（ '＃workeridinput'）;
var $ workeriderror = $（ '＃workeriderror'）;
//ユーザーが入力した作業番号が正しいかどうかを特定する
var isworkeridcorrect = false;
//バックグラウンド検証の識別作業番号が完了しました（true：is recking、false：検証が開始または終了していない）
var isworkeridloading = false;
//ユーザーがフォームを送信したかどうかを特定します
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）;
}）;
//ぼかして計算します
$ workeridinput.on（ 'Blur'、function（）{
var WorkerId = $ .trim（$（this）.val（））;
//長さが0の場合、作業番号が空のエラーメッセージが表示されます
if（！workerid.length）{
showworkeriderror（error_worker_id_is_null）;
falseを返します。
}
//ユーザーが現在入力したデータが前回入力されたデータと同じである場合、バックグラウンドインターフェイスは呼び出されません
//ユーザーが123456に入力してバックグラウンドインターフェイスを呼び出すと仮定します。
//ユーザーが入力コンテンツを変更した後、それでも123456であり、検証プログラムはネットワークにアクセスせず、エラーメッセージを直接表示します
if（workerid == $（this）.data（ 'before'））{
if（！isworkeridcorrect）{
showworkeriderror（error_worker_id_is_not_correct）;
}
falseを返します。
}
//背景インターフェイスを呼び出して、この従業員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'、
データ： {
workerid：workerid
}、
beforesend：function（）{
//リクエストを送信する前に、作業番号がチェックされています。
isWorkerIdLoading = true;
}、
成功：コールバック、
完了：function（）{
//終了後、ロゴを閉じます
isWorkerIdLoading = false;
//バックグラウンド検証プロセスでは、ユーザーがフォームを送信する場合、ここで自動的に送信します。
if（issubmit）{
$ workeridform.submit（）;
}
}
}）;
}
//フォームの送信を入力します
$ workeridinput.on（ 'keypress'、function（e）{
if（e .which === 13）{
$（this）.blur（）;
$ workeridform.submit（）;
}
}）;
$ workeridform.on（ 'submit'、function（）{
//仕事番号がバックグラウンドでチェックされている場合、ユーザーがフォームを送信したことが識別されます
if（isworkeridloading）{
Issubmit = true;
falseを返します。
}
if（！isworkeridcorrect）{
$ workeridinput.focus（）;
falseを返します。
}
}）;
最終効果では、図の2つの入力ボックスは非同期検証ですが、効果は同期と同じように見えます。
GPRRSネットワークは図で使用されており、ネットワークの速度が遅いことをシミュレートします
複製図