من الضروري تضمين حقول تأكيد كلمة المرور عند إنشاء النماذج عبر الإنترنت التي تطلب من المستخدمين تعيين كلمة مرور. يخفي حقل كلمة المرور مدخلات المستخدم بشكل افتراضي مما يجعل من الضروري وجود نوع من الآلية التي تسمح للمستخدمين بتأكيد أنهم كتبوا كلمة المرور الصحيحة دون ارتكاب أي أخطاء إملائية. يطالب حقل تأكيد كلمة المرور المستخدم بإعادة التحقق من كلمة المرور الخاصة به إذا أخطأ في كتابة أي أحرف وكانت كلمة المرور وحقول تأكيد كلمة المرور غير متطابقتين.
هدفنا في هذا المنشور هو إنشاء نموذج HTML يطابق مدخلات المستخدم في ملف كلمة المرور و تأكيد كلمة المرور لتأكيد ما إذا كان المستخدم قد كتب كلمة المرور الصحيحة أو قام بأي أخطاء إملائية.
الخطوة 1: نموذج HTML
تتمثل الخطوة الأولى في إنشاء نموذج HTML يأخذ مدخلات المستخدم:
< المركز >
< h2 > تلميح لينكس h2 >
< شكل >
< ص > أدخل كلمة المرور ص >
< الإدخال يكتب = 'كلمه السر' هوية شخصية = 'يمر' > < ر > < ر >
< ص > تأكيد كلمة المرور ص >
< الإدخال يكتب = 'كلمه السر' هوية شخصية = 'اكد المرور' > < ر > < ر >
< زر يكتب = 'إرسال' عند النقر = 'تأكيد كلمة المرور()' > سجل في زر >
شكل >
المركز >
لقد أنشأنا نموذج HTML بسيطًا يحتوي على حقلي إدخال من نوع كلمة المرور وزر تسجيل الدخول الذي يستدعي تأكيد كلمة المرور() تعمل عند النقر عليها.
الخطوة 2: التحقق من صحة نموذج JavaScript
الآن سنكتب كود JavaScript داخل ملف تأكيد كلمة المرور() الوظيفة التي تتحقق من صحة كلمة المرور:
وظيفة تأكيد كلمة المرور ( ) {
var password = document.getElementById ( 'يمر' ) .القيمة؛
var ConfirmPassword = document.getElementById ( 'اكد المرور' ) .القيمة؛
إذا ( كلمة المرور == '' ) {
إنذار ( 'خطأ: حقل كلمة المرور فارغ.' ) ؛
} آخر إذا ( كلمة المرور == ConfirmPassword ) {
إنذار ( 'مسجّل الدخول' ) ؛
} آخر {
إنذار ( 'يرجى التأكد من تطابق كلمات السر الخاصة بك.' )
}
}
داخل تأكيد كلمة المرور() وظيفة نحصل أولاً على قيم كلمة المرور وتأكيد حقول كلمة المرور وتخزينها داخل المتغيرات. ثم نستخدم العبارات الشرطية للتحقق من الحالات المختلفة.
الحالة 1: حقل كلمة المرور فارغ
يتحقق الشرط الأول مما إذا كان حقل كلمة المرور فارغًا. نطلب من المستخدم كتابة كلمة المرور إذا كان الحقل فارغًا:
الحالة 2: تطابق كلمات المرور
في حالة تطابق كلمات المرور ، يقوم المستخدم بتسجيل الدخول بنجاح:
الحالة 3: كلمات المرور غير متطابقة
في حالة عدم تطابق كلمات المرور ، نطلب من المستخدم إعادة كتابة كلمات المرور والتأكد من مطابقتها:
يبدو كود JavaScript و HTML معًا شيئًا كالتالي:
< لغة البرمجة >
< هيئة >
< المركز >
< h2 > تلميح لينكس h2 >
< شكل >
< ص > أدخل كلمة المرور ص >
< الإدخال يكتب = 'كلمه السر' هوية شخصية = 'يمر' > < ر > < ر >
< ص > تأكيد كلمة المرور ص >
< الإدخال يكتب = 'كلمه السر' هوية شخصية = 'اكد المرور' > < ر > < ر >
< زر يكتب = 'إرسال' عند النقر = 'تأكيد كلمة المرور()' > سجل في زر >
شكل >
المركز >
هيئة >
< النصي >
وظيفة تأكيد كلمة المرور ( ) {
var password = document.getElementById ( 'يمر' ) .القيمة؛
var ConfirmPassword = document.getElementById ( 'اكد المرور' ) .القيمة؛
إذا ( كلمة المرور == '' ) {
إنذار ( 'خطأ: حقل كلمة المرور فارغ.' ) ؛
} آخر إذا ( كلمة المرور == ConfirmPassword ) {
إنذار ( 'مسجّل الدخول' ) ؛
} آخر {
إنذار ( 'يرجى التأكد من تطابق كلمات السر الخاصة بك.' )
}
}
النصي >
لغة البرمجة >
استنتاج
غالبًا ما يرتكب البشر أخطاء ، لكن لا ينبغي أن يمنعهم ذلك من تسجيل الدخول إلى حساباتهم. حتى أدنى خطأ في إدخال كلمة المرور يمكن أن يقيد وصول المستخدم إلى حسابه. لذلك ، من الأفضل دائمًا التحقق مرة أخرى من كلمة مرور المستخدم للتأكد من أنه أدخل كلمة المرور الصحيحة.