عيوب التحقق من النموذج المتزامن
عند الرد على رسالة الخطأ ، يجب إعادة تحميل الصفحة بأكملها (على الرغم من وجود ذاكرة التخزين المؤقت ، لا يزال العميل بحاجة إلى مقارنة ما إذا كان لكل ملف تحديثات من خلال بروتوكول 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 = "الرجاء إدخال رقم موظف صالح" ؛
// عرض رسالة الخطأ
وظيفة العرض WorkerIderRor (errormessage) {
$ workeriderror.html (errormessage) ؛
$ workeriderror.show () ؛
}
// إخفاء رسالة الخطأ
$ workeridinput.on ('keydown' ، function () {
$ workeriderror.hide () ؛
}) ؛
// احفظ رقم العمل الذي أدخلته في المرة الأخيرة
$ workeridinput.on ('Focus' ، function () {
var workerid = $ .trim ($ (this) .val ()) ؛
$ (this) .data ('قبل "، عامل) ؛
}) ؛
// حساب عند ضبابية
$ workeridinput.on ('Blur' ، function () {
var workerid = $ .trim ($ (this) .val ()) ؛
// عندما يكون الطول 0 ، يتم عرض رسالة الخطأ برقم العمل الفارغ
if (! workerid.length) {
ShowWorkerIderRor (error_worker_id_is_null) ؛
العودة كاذبة
}
// إذا كانت البيانات التي أدخلها المستخدم هي نفسها التي تم إدخالها في المرة الأخيرة ، فلن يتم استدعاء واجهة الخلفية
// افترض أن المستخدم يدخل 123456 ويدعو واجهة الخلفية ، ونتيجة الإرجاع هي رقم العمل غير الصحيح
// بعد تغيير المستخدم لمحتوى الإدخال ، لا يزال 123456 ، لن يقوم برنامج التحقق بالوصول إلى الشبكة ويعرض رسالة الخطأ مباشرةً
if (workerid == $ (this) .data ('قبل')) {
if (! iSworkerIdCorrect) {
ShowWorkerIderRor (error_worker_id_is_not_correct) ؛
}
العودة كاذبة
}
// استدعاء واجهة الخلفية للتحقق مما إذا كان معرف الموظف هذا صحيحًا
CheckerWidexists (WorkerId ، وظيفة (بيانات) {
iSworkerIdCorrect = data.isworkeridexists ؛
if (! iSworkerIdCorrect) {
ShowWorkerIderRor (error_worker_id_is_not_correct) ؛
}
}) ؛
}) ؛
دالة checkeridexists (WorkerId ، رد الاتصال) {
$ .ajax ({
url: base_path + '/forgotpwd/checkworkeridexists.htm' ،
بيانات: {
WorkerId: WorkerId
} ،
النجاح: رد الاتصال
}) ؛
}
$ workeridform.on ('submit' ، function () {
// لا يمكن تقديم نموذجنا إلا عندما يعيد الخادم صحيحًا
if (! iSworkerIdCorrect) {
$ workeridinput.focus () ؛
العودة كاذبة
}
}) ؛
بعد كتابة الكود أعلاه ، يتم التحقق من مربع الإدخال بشكل أساسي.
أعتقد أن هناك بعض الأشياء التي تؤثر على تجربة المستخدم
عملية عودة النقل غير مدعومة بعد. يا إلهي ، يجب أن تكون قادرًا على إرسال نموذج إذا أدخلت.
إذا كانت سرعة الإنترنت الخاصة بالمستخدم بطيئة ، فانقر فوق الزر "إرسال" ، ولن يكون هناك أي استجابة ، لأن iSworkerIdCorrect خاطئة ، وسيكون صحيحًا فقط إذا كان التحقق من الخادم ناجحًا.
هنا هو الكود المعدل:
نسخة الكود كما يلي:
var base_path = '$ {rc.contextpath}' ؛
var $ workeridInput = $ ('#workeridinput') ؛
var $ workeriderror = $ ('#workeriderror') ؛
// حدد ما إذا كان رقم العمل الذي أدخله المستخدم صحيحًا
var iSworkerIdCorrect = false ؛
// تحديد رقم عمل التحقق من الخلفية قد تم إكماله (صحيح: التحقق ، خطأ: لم يبدأ التحقق أو انتهى)
var isworkeridloading = false ؛
// حدد ما إذا كان المستخدم قد قدم النموذج
var issubmit = false ؛
var error_worker_id_is_null = "لا يمكن أن يكون رقم عمل الموظف فارغًا" ؛
var error_worker_id_is_not_correct = "الرجاء إدخال رقم موظف صالح" ؛
// عرض رسالة الخطأ
وظيفة العرض WorkerIderRor (errormessage) {
$ workeriderror.html (errormessage) ؛
$ workeriderror.show () ؛
}
// إخفاء رسالة الخطأ
$ workeridinput.on ('keydown' ، function () {
$ workeriderror.hide () ؛
}) ؛
// احفظ رقم العمل الذي أدخلته في المرة الأخيرة
$ workeridinput.on ('Focus' ، function () {
var workerid = $ .trim ($ (this) .val ()) ؛
$ (this) .data ('قبل "، عامل) ؛
}) ؛
// حساب عند ضبابية
$ workeridinput.on ('Blur' ، function () {
var workerid = $ .trim ($ (this) .val ()) ؛
// عندما يكون الطول 0 ، يتم عرض رسالة الخطأ برقم العمل الفارغ
if (! workerid.length) {
ShowWorkerIderRor (error_worker_id_is_null) ؛
العودة كاذبة
}
// إذا كانت البيانات التي أدخلها المستخدم هي نفسها التي تم إدخالها في المرة الأخيرة ، فلن يتم استدعاء واجهة الخلفية
// افترض أن المستخدم يدخل 123456 ويدعو واجهة الخلفية ، ونتيجة الإرجاع هي رقم العمل غير الصحيح
// بعد تغيير المستخدم لمحتوى الإدخال ، لا يزال 123456 ، لن يقوم برنامج التحقق بالوصول إلى الشبكة ويعرض رسالة الخطأ مباشرةً
if (workerid == $ (this) .data ('قبل')) {
if (! iSworkerIdCorrect) {
ShowWorkerIderRor (error_worker_id_is_not_correct) ؛
}
العودة كاذبة
}
// استدعاء واجهة الخلفية للتحقق مما إذا كان معرف الموظف هذا موجود
CheckerWidexists (WorkerId ، وظيفة (بيانات) {
iSworkerIdCorrect = data.isworkeridexists ؛
if (! iSworkerIdCorrect) {
ShowWorkerIderRor (error_worker_id_is_not_correct) ؛
}
}) ؛
}) ؛
دالة checkeridexists (WorkerId ، رد الاتصال) {
$ .ajax ({
url: base_path + '/forgotpwd/checkworkeridexists.htm' ،
بيانات: {
WorkerId: WorkerId
} ،
Be Forresend: Function () {
// قبل إرسال الطلب ، يتم فحص رقم العمل.
iSworkerIdloading = صحيح ؛
} ،
النجاح: رد الاتصال ،
أكمل: function () {
// بعد النهاية ، أغلق الشعار
iSworkerIdLoading = false ؛
// في عملية التحقق من الخلفية ، إذا قام المستخدم بتقديم نموذج ، فسيقوم بإرساله تلقائيًا هنا.
إذا (issubmit) {
$ workeridform.submit () ؛
}
}
}) ؛
}
// أدخل إرسال النموذج
$ workeridinput.on ('keypress' ، function (e) {
if (e.hich === 13) {
$ (هذا) .blur () ؛
$ workeridform.submit () ؛
}
}) ؛
$ workeridform.on ('submit' ، function () {
// إذا تم فحص رقم العمل في الخلفية ، فسيتم تحديد أن المستخدم قد قدم النموذج
if (iSworkerIdloading) {
issubmit = صحيح ؛
العودة كاذبة
}
if (! iSworkerIdCorrect) {
$ workeridinput.focus () ؛
العودة كاذبة
}
}) ؛
في التأثير النهائي ، هما مربعان الإدخال في الشكل هما التحقق غير المتزامن ، لكن التأثير يبدو متزامنًا.
يتم استخدام شبكة GPRRS في الشكل لمحاكاة سرعة الشبكة البطيئة
رسم تخطيطي للتكاثر