التحقق من صحة كلمة المرور في JavaScript [شرح الإعداد خطوة بخطوة]

يطلب أي موقع ويب يدعم المصادقة والتفويض دائمًا اسم مستخدم وكلمة مرور من خلال تسجيل الدخول. إذا لم يكن الأمر كذلك ، يحتاج المستخدم إلى التسجيل وإنشاء كلمة مرور لتسجيل الدخول إلى الجلسة التالية ، وبالتالي تميل مواقع الويب إلى توفير بروتوكولات أو معلمات محددة. تُستخدم المعلمات التالية بشكل شائع للتحقق من صحة كلمة المرور بأي شكل من الأشكال.

• يتم قبول المدخلات الأبجدية الرقمية فقط في حقل كلمة المرور.
• يجب أن تبدأ بالأحرف الأبجدية الكبيرة.
• كلمة مرور أبجدية كبيرة واحدة على الأقل.
• يجب أن تكون كلمة المرور بطول معين.
• يجب استخدام قيمة عددية واحدة في كلمة المرور.
• يجب أن يكون لكلمة المرور حد أدنى وحد أقصى للطول.

يضمن التحقق من صحة كلمة المرور في JavaScript اتباع هذه المعلمات عندما يقوم المستخدم بإنشاء كلمة مرور. يجب استيفاء الشروط المحددة لتكوين كلمة مرور قوية بشكل معقول. يمكن التحقق من صحة بنية كلمة المرور عن طريق التعبير العادي باستخدام كود JavaScript.

لمعالجة التحقق من صحة كلمة المرور باستخدام JavaScript في حقل كلمة المرور ، سيتم اتباع الخطوات التالية.

التحقق من صحة كلمة المرور في جافا سكريبت

1. إنشاء نموذج HTML

يجب أن يحتوي النموذج على حقول أساسية مثل البريد الإلكتروني ورقم الهاتف وكلمة المرور. دعونا نرى مثالاً على كود HTML لتعريف بنية النموذج.

<! DOCTYPE html >

< html lang = "en" >

< رئيس >

< meta charset = “UTF-8” >

< meta name = "viewport" content = "width = device-width، initial-scale = 1.0" >

< عنوان > نموذج </ عنوان >

</ رئيس >

< الجسم >

< div class = "container" >

< شكل الإجراء = “/action_page.php” >

< label for = “usrname” > عنوان البريد الإلكتروني </ label >

< نوع الإدخال = “text” id = “usrname” name = “usrname” مطلوب >

< تسمية لـ = "psw" > كلمة المرور </ label >

< نوع الإدخال = "كلمة المرور" id = اسم " psw" = نمط "psw" = "(؟ =. * \ d) (؟ =. * [az]) (؟ =. * [AZ]). {8، } ” title = " يجب أن يحتوي على رقم واحد على الأقل وحرف واحد كبير وصغير ، وما لا يقل عن 8 أحرف أو أكثر " مطلوب >

< نوع الإدخال = "إرسال" القيمة = "إرسال" >

</ شكل >

</ div >

< div id = "message" >

< h3 > يجب أن تحتوي كلمة المرور على ما يلي: </ h3 >

< p id = "letter" class = "غير صالح" > A < b > حرف صغير </ b > حرف </ p >

< p id = "capital" class = "غير صالح" > A < b > حرف (أحرف كبيرة) </ b > letter </ p >

< p id = "number" class = "غير صالح" > A < b > number </ b > </ p >

< p id = “length” class = “غير صالح” > الحد الأدنى < b > 16 حرفًا </ b > </ p >

</ div >

</ الجسم >

</ html >

2. أضف CSS

الإدخال {

العرض : 100٪ ؛

الحشو : 12 بكسل ؛

الحدود : 1px صلب #ccc ؛

نصف قطر الحدود : 4 بكسل ؛

تحجيم الصندوق : مربع الحدود ؛

أعلى الهامش : 6 بكسل ؛

الهامش السفلي : 16 بكسل ؛

}

/ * نمط زر الإرسال * /

إدخال [ نوع = إرسال ] {

لون الخلفية : # 4CAF50 ؛

اللون : أبيض ؛

}

/ * تصميم الحاوية للمدخلات * /

.container {

لون الخلفية : # f1f1f1 ؛

الحشو : 20 بكسل ؛

}

# الرسالة {

عرض : لا شيء ؛

الخلفية : # f1f1f1 ؛

اللون : # 000 ؛

الموقف : نسبي ؛

الحشو : 20 بكسل ؛

أعلى الهامش : 10 بكسل ؛

}

# الرسالة p {

الحشو : 10 بكسل 35 بكسل ؛

حجم الخط : 18 بكسل ؛

}

.valid {

اللون : RGB ( 3 ، 184 ، 190 ) ؛

}

.valid: قبل {

الموقف : نسبي ؛

اليسار : -35 بكسل ؛

المحتوى : "& # 10004 ؛" ؛

}

.invalid {

اللون : أحمر ؛

}

.invalid: قبل {

الموقف : نسبي ؛

اليسار : -35 بكسل ؛

المحتوى : "& # 10006 ؛" ؛

}

تسجيل الخروج: أفضل أطر عمل جافا سكريبت في عام 2021

3. أضف JavaScript

var myInput = المستند . getElementById ( “psw” ) ؛

حرف var = المستند . getElementById ( "حرف" ) ؛

فار كابيتال = وثيقة . getElementById ( "رأس المال" ) ؛

var number = المستند . getElementById ( "رقم" ) ؛

var length = المستند . getElementById ( “length” )

مدخلاتي . onfocus = function () {

وثيقة . getElementById ( "الرسالة" ). أسلوب . عرض = "كتلة" ؛

}

مدخلاتي . onblur = الوظيفة () {

وثيقة . getElementById ( "الرسالة" ). أسلوب . عرض = "لا شيء" ؛

}

مدخلاتي . onkeyup = الوظيفة () {

var LowerCaseLetters = / [ az ] / g ؛

إذا كانت ( myInput . value . match ( lowerCaseLetters )) {

رسالة . قائمة الصف . إزالة ( "غير صالحة" ) ؛

رسالة . قائمة الصف . إضافة ( "صالحة" ) ؛

} آخر {

رسالة . قائمة الصف . إزالة ( "صالحة" ) ؛

رسالة . قائمة الصف . إضافة ( "غير صالحة" ) ؛

}

var upperCaseLetters = / [ AZ ] / g ؛

إذا ( myInput . value . match ( upperCaseLetters )) {

العاصمة . قائمة الصف . إزالة ( "غير صالحة" ) ؛

العاصمة . قائمة الصف . إضافة ( "صالحة" ) ؛

} آخر {

العاصمة . قائمة الصف . إزالة ( "صالحة" ) ؛

العاصمة . قائمة الصف . إضافة ( "غير صالحة" ) ؛

}

أرقام فار = / [ 0-9 ] / ز ؛

إذا ( myInput . value . match ( number )) {

رقم . قائمة الصف . إزالة ( "غير صالحة" ) ؛

رقم . قائمة الصف . إضافة ( "صالحة" ) ؛

} آخر {

رقم . قائمة الصف . إزالة ( "صالحة" ) ؛

رقم . قائمة الصف . إضافة ( "غير صالحة" ) ؛

}

إذا ( myInput . value . length > = 8 ) {

الطول . قائمة الصف . إزالة ( "غير صالحة" ) ؛

الطول . قائمة الصف . إضافة ( "صالحة" ) ؛

} آخر {

الطول . قائمة الصف . إزالة ( "صالحة" ) ؛

الطول . قائمة الصف . إضافة ( "غير صالحة" ) ؛

}

}

تحصل شفرة JavaScript في البداية على عنصر بواسطة المعرف ؛ بعد ذلك ، يسمح لها بالعرض على الشاشة. كما يقوم بتشغيل الشروط للحصول على كلمة المرور بالتنسيق المحدد. يتم التحقق من صحة الحروف الأبجدية الكبيرة والحروف الأبجدية الصغيرة والأرقام من خلال التعبير العادي الذي تم إنشاؤه في التعليمات البرمجية.

4. التعبيرات العادية / REGEX

التعبيرات العادية هي أنماط لمطابقة التركيبة الأصلية للقيم الحرفية التي تم تمريرها في الحقل. في التحقق من صحة كلمة المرور ، يلعب استخدام تعبير JavaScript العادي دورًا أساسيًا في تحديد السلسلة وما إذا كانت بالتنسيق المحدد أم لا. التعبيرات العادية هي كائنات JavaScript. تتم كتابة هذه التعبيرات العادية بين الشرطات المائلة في كود JavaScript للتحقق من صحة كلمة المرور.

مثال: let re = / ac-b /

كيف تكتب التحقق من كلمة المرور في JavaScript باستخدام التعبير العادي؟

يتكون التعبير العادي من أحرف بسيطة مدمجة بأحرف خاصة. يتم تشكيل التعبير النمطي وفقًا لمعايير أو قيود كلمة مرور قوية. يتم استخدام الأحرف الخاصة عند وجود تطابق شديد بين السلاسل أو الأحرف.

وصفت شفرة جافا سكريبت أعلاه استخدامًا للتعبيرات العادية للعثور على الحروف الأبجدية الكبيرة والحروف الأبجدية الصغيرة والأرقام. يتكون التعبير من تسلسلات مختلفة ومتتالية. هناك قواعد معينة لكل حرف يتم استخدامه في التعبير العادي.

مثال: اسمح للرقم = / [0-9] / g. يقبل الأرقام الموجودة في النطاق من 0 إلى 9.

تسجيل الخروج: مشاريع جافا سكريبت في جيثب

تعلم دورات البرمجيات عبر الإنترنت من أفضل الجامعات في العالم. اربح برامج PG التنفيذية أو برامج الشهادات المتقدمة أو برامج الماجستير لتتبع حياتك المهنية بشكل سريع.

خاتمة

يعد التحقق من صحة كلمة المرور أمرًا بالغ الأهمية لأنه يسمح للمستخدم بإنشاء كلمة مرور قوية وتجنب أي تشققات محتملة لكلمة المرور. باستخدام JavaScript ، يمكن للمرء إضافة التفاعلية ومن ثم إخطار المستخدم حتى تحتوي كلمة المرور على جميع الأحرف المطلوبة في أي تسلسل. يلعب التعبير العادي المشفر في JavaScript دورًا رئيسيًا في تحديد التسلسلات. إنه ينزل المعلمات المكتوبة إلى كود JavaScript.

إذا كنت مهتمًا بمعرفة المزيد حول التطوير الكامل ، فراجع برنامج upGrad & IIIT-B Executive PG في تطوير البرامج الكامل المكدس المصمم للمهنيين العاملين ويقدم أكثر من 500 ساعة من التدريب الصارم ، وأكثر من 9 مشاريع ومهام ، وحالة خريجي IIIT-B ، ومشاريع التخرج العملية العملية والمساعدة في العمل مع الشركات الكبرى.