Kerugian dari verifikasi bentuk sinkron
Saat menanggapi pesan kesalahan, seluruh halaman perlu dimuat ulang (walaupun ada cache, klien masih perlu membandingkan apakah setiap file memiliki pembaruan melalui protokol HTTP untuk menjaga agar file tetap up to date)
Setelah server merespons secara tidak benar, semua informasi yang dimasukkan oleh pengguna hilang, dan pengguna perlu mengisinya dari awal (beberapa browser telah membantu kami menyimpan data ini)
Tujuan asli dari Formulir Verifikasi Asinkron
Tingkatkan pengalaman pengguna
Memaksimalkan dan mengurangi permintaan jaringan dan mengurangi tekanan server
Mari kita lihat verifikasi bentuk asinkron yang umum (periksa apakah nomor pekerjaan ada di latar belakang, dan itu ada sebagai nomor kerja yang valid)
Verifikasi Nomor Kerja
Salinan kode adalah sebagai berikut:
var base_path = '$ {rc.contextPath}';
var $ workeridInput = $ ('#workeridInput');
var $ workeriderror = $ ('#workeriderror');
// Identifikasi apakah nomor pekerjaan yang dimasukkan oleh pengguna benar
var isWorkeridCorrect = false;
var error_worker_id_is_null = "Nomor kerja karyawan tidak dapat kosong";
var error_worker_id_is_not_correct = "Harap masukkan nomor karyawan yang valid";
// Tampilkan pesan kesalahan
fungsi showworkeriderror (errorMessage) {
$ workeriderror.html (errorMessage);
$ workeriderror.show ();
}
// Sembunyikan pesan kesalahan
$ workeridInput.on ('KeyDown', function () {
$ workeriderror.hide ();
});
// Simpan nomor pekerjaan yang Anda masukkan terakhir kali
$ workeridinput.on ('focus', function () {
var workerid = $ .trim ($ (ini) .val ());
$ (ini) .data ('Sebelum', workerid);
});
// Menghitung saat blur
$ workeridinput.on ('blur', function () {
var workerid = $ .trim ($ (ini) .val ());
// Saat panjangnya 0, pesan kesalahan dengan nomor kerja kosong ditampilkan
if (! workerid.length) {
showworkeriderror (error_worker_id_is_null);
mengembalikan false;
}
// Jika data yang saat ini dimasukkan oleh pengguna sama dengan data yang dimasukkan terakhir kali, antarmuka latar tidak akan dipanggil
// Misalkan pengguna memasuki 123456 dan memanggil antarmuka latar belakang, dan hasil pengembalian adalah, nomor kerja yang salah
// Setelah pengguna mengubah konten input, masih 123456, program verifikasi tidak akan mengakses jaringan dan secara langsung menampilkan pesan kesalahan
if (workerid == $ (this) .data ('sebelum')) {
if (! isWorkerIdcorrect) {
showworkeriderror (error_worker_id_is_not_correct);
}
mengembalikan false;
}
// Memanggil antarmuka latar untuk memeriksa apakah ID karyawan ini benar
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
},
Sukses: Callback
});
}
$ workeridform.on ('kirim', fungsi () {
// Formulir kami hanya dapat dikirimkan saat server mengembalikan true
if (! isWorkerIdcorrect) {
$ workeridinput.focus ();
mengembalikan false;
}
});
Setelah menulis kode di atas, verifikasi kotak input pada dasarnya dilakukan.
Saya pikir ada beberapa hal yang memengaruhi pengalaman pengguna
Operasi pengembalian kereta belum didukung. Ya Tuhan, Anda harus dapat mengirimkan formulir jika Anda masuk.
Jika kecepatan internet pengguna lambat, klik tombol kirim, tidak akan ada respons, karena ISWorkerIdCorrect salah, dan itu akan benar hanya jika verifikasi server berhasil.
Ini kode yang dimodifikasi:
Salinan kode adalah sebagai berikut:
var base_path = '$ {rc.contextPath}';
var $ workeridInput = $ ('#workeridInput');
var $ workeriderror = $ ('#workeriderror');
// Identifikasi apakah nomor pekerjaan yang dimasukkan oleh pengguna benar
var isWorkeridCorrect = false;
// Identifikasi Nomor Kerja Verifikasi Latar Belakang telah selesai (Benar: Sedang Memeriksa, Salah: Verifikasi belum dimulai atau diakhiri)
var isWorkerIdloading = false;
// Identifikasi apakah pengguna telah mengirimkan formulir
var issubmit = false;
var error_worker_id_is_null = "Nomor kerja karyawan tidak dapat kosong";
var error_worker_id_is_not_correct = "Harap masukkan nomor karyawan yang valid";
// Tampilkan pesan kesalahan
fungsi showworkeriderror (errorMessage) {
$ workeriderror.html (errorMessage);
$ workeriderror.show ();
}
// Sembunyikan pesan kesalahan
$ workeridInput.on ('KeyDown', function () {
$ workeriderror.hide ();
});
// Simpan nomor pekerjaan yang Anda masukkan terakhir kali
$ workeridinput.on ('focus', function () {
var workerid = $ .trim ($ (ini) .val ());
$ (ini) .data ('Sebelum', workerid);
});
// Menghitung saat blur
$ workeridinput.on ('blur', function () {
var workerid = $ .trim ($ (ini) .val ());
// Saat panjangnya 0, pesan kesalahan dengan nomor kerja kosong ditampilkan
if (! workerid.length) {
showworkeriderror (error_worker_id_is_null);
mengembalikan false;
}
// Jika data yang saat ini dimasukkan oleh pengguna sama dengan data yang dimasukkan terakhir kali, antarmuka latar tidak akan dipanggil
// Misalkan pengguna memasuki 123456 dan memanggil antarmuka latar belakang, dan hasil pengembalian adalah, nomor kerja yang salah
// Setelah pengguna mengubah konten input, masih 123456, program verifikasi tidak akan mengakses jaringan dan secara langsung menampilkan pesan kesalahan
if (workerid == $ (this) .data ('sebelum')) {
if (! isWorkerIdcorrect) {
showworkeriderror (error_worker_id_is_not_correct);
}
mengembalikan false;
}
// Memanggil antarmuka latar untuk memeriksa apakah ada ID karyawan ini
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 () {
// Sebelum mengirim permintaan, nomor kerja sedang diperiksa.
isWorkerIdloading = true;
},
Sukses: Callback,
Lengkap: function () {
// Setelah akhirnya, tutup logo
isWorkerIdloading = false;
// Dalam proses verifikasi latar belakang, jika pengguna mengirimkan formulir, ia akan mengirimkannya secara otomatis di sini.
if (issubmit) {
$ workeridform.submit ();
}
}
});
}
// masukkan Kirim formulir
$ workeridInput.on ('keypress', function (e) {
if (e.WHich === 13) {
$ (ini) .blur ();
$ workeridform.submit ();
}
});
$ workeridform.on ('kirim', fungsi () {
// Jika nomor kerja diperiksa di latar belakang, akan diidentifikasi bahwa pengguna telah mengirimkan formulir
if (isWorkerIdloading) {
issubmit = true;
mengembalikan false;
}
if (! isWorkerIdcorrect) {
$ workeridinput.focus ();
mengembalikan false;
}
});
Dalam efek akhir, dua kotak input pada gambar adalah verifikasi yang tidak sinkron, tetapi efeknya terlihat sama dengan sinkron.
Jaringan GPRRS digunakan dalam gambar untuk mensimulasikan kecepatan jaringan yang lambat
Diagram reproduksi