การตรวจสอบรหัสผ่านใน JavaScript [อธิบายการตั้งค่าทีละขั้นตอน]

เว็บไซต์ใด ๆ ที่สนับสนุนการรับรองความถูกต้องและการอนุญาตจะขอชื่อผู้ใช้และรหัสผ่านผ่านการเข้าสู่ระบบเสมอ หากไม่เป็นเช่นนั้น ผู้ใช้จะต้องลงทะเบียนและสร้างรหัสผ่านเพื่อเข้าสู่ระบบในเซสชั่นถัดไป และด้วยเหตุนี้เว็บไซต์จึงมักจะให้โปรโตคอลหรือพารามิเตอร์เฉพาะ พารามิเตอร์ต่อไปนี้มักใช้สำหรับการตรวจสอบรหัสผ่านในทุกรูปแบบ

• เฉพาะอินพุตที่เป็นตัวอักษรและตัวเลขเท่านั้นที่ยอมรับในฟิลด์รหัสผ่าน
• ควรขึ้นต้นด้วยอักษรตัวพิมพ์ใหญ่
• อย่างน้อยหนึ่งรหัสผ่านตัวอักษรตัวพิมพ์ใหญ่
• รหัสผ่านควรมีความยาวเฉพาะ
• ต้องใช้ค่าตัวเลขหนึ่งค่าในรหัสผ่าน
• รหัสผ่านต้องมีความยาวขั้นต่ำและสูงสุด

การตรวจสอบรหัสผ่านใน JavaScript ช่วยให้มั่นใจได้ว่าพารามิเตอร์เหล่านี้จะถูกติดตามเมื่อผู้ใช้สร้างรหัสผ่าน ต้องเป็นไปตามเงื่อนไขที่กำหนดเพื่อสร้างรหัสผ่านที่รัดกุมพอสมควร โครงสร้างของรหัสผ่านสามารถตรวจสอบได้ด้วยนิพจน์ทั่วไปโดยใช้โค้ด JavaScript

สำหรับการประมวลผลการตรวจสอบรหัสผ่านโดยใช้ JavaScript ในช่องรหัสผ่าน ให้ปฏิบัติตามขั้นตอนด้านล่าง

การตรวจสอบรหัสผ่านใน Javascript

1. สร้างแบบฟอร์ม HTML

แบบฟอร์มควรมีฟิลด์พื้นฐาน เช่น อีเมล หมายเลขโทรศัพท์ และรหัสผ่าน มาดูตัวอย่างโค้ด HTML เพื่อกำหนดโครงสร้างของฟอร์มกัน

<! DOCTYPE html >

< html lang = “en” >

< หัว >

< ชุดอักขระ meta = “UTF-8” >

< ชื่อ เมตา = เนื้อหา "วิวพอร์ต" = "ความกว้าง = ความกว้างของอุปกรณ์ มาตราส่วนเริ่มต้น = 1.0" >

< หัวเรื่อง > แบบฟอร์ม </ หัวเรื่อง >

</ head >

< ร่างกาย >

< คลาส div = “คอนเทนเนอร์” >

< form action = “/action_page.php” >

< label for = “usrname” > ที่อยู่อีเมล </ label >

< input type = “text” id = “usrname” name = “usrname” จำเป็น >

< label for = “psw” > รหัสผ่าน </ label >

< ประเภท การป้อนข้อมูล = “รหัสผ่าน” id = “psw” ชื่อ = “psw” รูปแบบ = “(?=.*\d)(?=.*[az])(?=.*[AZ]).{8, }” title = “ต้องมีอย่างน้อยหนึ่งตัวเลขและหนึ่งตัวพิมพ์ใหญ่และตัวพิมพ์เล็กและอย่างน้อย 8 อักขระขึ้นไป” ที่จำเป็น >

< ประเภท อินพุต = “ส่ง” ค่า = “ส่ง” >

</ แบบฟอร์ม >

</ div >

< div id = “ข้อความ” >

< h3 > รหัสผ่านต้องมีดังต่อไปนี้: </ h3 >

< p id = “letter” class = “invalid” > A < b > ตัวพิมพ์เล็ก </ b > ตัวอักษร </ p >

< p id = “capital” class = “invalid” > A < b > ตัวพิมพ์ใหญ่ (ตัวพิมพ์ใหญ่) </ b > ตัวอักษร </ p >

< p id = “number” class = “invalid” > A < b > number </ b ></ p >

< p id = “ความยาว” class = “ไม่ถูกต้อง” > ขั้นต่ำ < b > 16 ตัวอักษร </ b ></ p >

</ div >

</ body >

</ html >

2. เพิ่ม CSS

อินพุต {

ความกว้าง : 100% ;

ช่องว่าง ภายใน : 12px ;

เส้นขอบ : 1px ทึบ #ccc ;

รัศมีเส้นขอบ : 4px ;

ขนาดกล่อง : border-box ;

ขอบบน : 6px ;

ระยะขอบล่าง : 16px ;

}

/* กำหนดรูปแบบปุ่มส่ง */

อินพุต [ ประเภท = ส่ง ] {

พื้นหลัง-สี : #4CAF50 ;

สี : ขาว ;

}

/* จัดรูปแบบคอนเทนเนอร์สำหรับอินพุต */

.container {

สีพื้นหลัง : #f1f1f1 ;

ช่องว่าง ภายใน : 20px ;

}

#ข้อความ {

แสดง : ไม่มี ;

พื้นหลัง : #f1f1f1 ;

สี : #000 ;

ตำแหน่ง : ญาติ ;

ช่องว่าง ภายใน : 20px ;

ขอบบน : 10px ;

}

#ข้อความ p {

ช่องว่าง ภายใน : 10px 35px ;

ขนาดตัวอักษร : 18px ;

}

.ถูกต้อง {

สี : rgb ( 3 , 184 , 190 );

}

.valid: ก่อน {

ตำแหน่ง : ญาติ ;

ซ้าย : -35px ;

เนื้อหา : “&#10004;” ;

}

.invalid {

สี : แดง ;

}

.invalid:ก่อน {

ตำแหน่ง : ญาติ ;

ซ้าย : -35px ;

เนื้อหา : “&#10006;” ;

}

ชำระเงิน: Javascript Framework อันดับต้น ๆ ในปี 2021

3. เพิ่ม JavaScript

var myInput = เอกสาร _ getElementById ( “psw” );

var ตัว อักษร = เอกสาร getElementById ( “จดหมาย” );

ทุน var = เอกสาร _ getElementById ( “ทุน” );

var number = เอกสาร _ getElementById ( “หมายเลข” );

var length = เอกสาร _ getElementById ( “ความยาว” )

อินพุต ของฉัน onfocus = ฟังก์ชั่น () {

เอกสาร _ getElementById ( “ข้อความ” ) สไตล์ . display = “บล็อก” ;

}

อินพุต ของฉัน onblur = ฟังก์ชั่น () {

เอกสาร _ getElementById ( “ข้อความ” ) สไตล์ . display = “ไม่มี” ;

}

อินพุต ของฉัน onkeyup = ฟังก์ชั่น () {

var lowerCaseLetters = / [ az ] / g ;

ถ้า ( ค่า myInput ตรงกัน ( ตัว พิมพ์ เล็ก )) {

จดหมาย _ คลาสลิ สต์ ลบ ( “ไม่ถูกต้อง” );

จดหมาย _ คลาสลิ สต์ เพิ่ม ( “ถูกต้อง” );

} อื่นๆ {

จดหมาย _ คลาสลิ สต์ ลบ ( “ถูกต้อง” );

จดหมาย _ คลาสลิ สต์ เพิ่ม ( “ไม่ถูกต้อง” );

}

var upperCaseLetters = / [ AZ ] / g ;

ถ้า ( myInput . ตรงกัน ( ตัว พิมพ์ ใหญ่ )) {

ทุน . คลาสลิ สต์ ลบ ( “ไม่ถูกต้อง” );

ทุน . คลาสลิ สต์ เพิ่ม ( “ถูกต้อง” );

} อื่นๆ {

ทุน . คลาสลิ สต์ ลบ ( “ถูกต้อง” );

ทุน . คลาสลิ สต์ เพิ่ม ( “ไม่ถูกต้อง” );

}

var ตัวเลข = / [ 0-9 ] / g ;

ถ้า ( ค่า myInput . ตรงกัน ( ตัวเลข ) ) {

หมายเลข . คลาสลิ สต์ ลบ ( “ไม่ถูกต้อง” );

หมายเลข . คลาสลิ สต์ เพิ่ม ( “ถูกต้อง” );

} อื่นๆ {

หมายเลข . คลาสลิ สต์ ลบ ( “ถูกต้อง” );

หมายเลข . คลาสลิ สต์ เพิ่ม ( “ไม่ถูกต้อง” );

}

if ( myInput . value . length >= 8 ) {

ความยาว . คลาสลิ สต์ ลบ ( “ไม่ถูกต้อง” );

ความยาว . คลาสลิ สต์ เพิ่ม ( “ถูกต้อง” );

} อื่นๆ {

ความยาว . คลาสลิ สต์ ลบ ( “ถูกต้อง” );

ความยาว . คลาสลิ สต์ เพิ่ม ( “ไม่ถูกต้อง” );

}

}

โค้ด JavaScript เริ่มแรกได้รับองค์ประกอบโดย id; หลังจากนั้นก็อนุญาตให้แสดงบนหน้าจอ นอกจากนี้ยังรันเงื่อนไขเพื่อรับรหัสผ่านในรูปแบบที่กำหนด ตัวอักษรพิมพ์ใหญ่ อักษรตัวพิมพ์เล็ก และตัวเลขได้รับการตรวจสอบผ่านนิพจน์ทั่วไปที่สร้างในโค้ด

4. นิพจน์ทั่วไป/REGEX

นิพจน์ทั่วไปคือรูปแบบที่ตรงกับชุดค่าผสมดั้งเดิมของตัวอักษรที่ส่งผ่านในฟิลด์ ในการตรวจสอบรหัสผ่าน การใช้นิพจน์ทั่วไปของ JavaScript มีบทบาทสำคัญในการระบุสตริงและไม่ว่าจะอยู่ในรูปแบบที่กำหนดหรือไม่ก็ตาม นิพจน์ทั่วไปคือวัตถุ JavaScript นิพจน์ทั่วไปเหล่านี้เขียนขึ้นระหว่างเครื่องหมายทับในโค้ด JavaScript สำหรับการตรวจสอบรหัสผ่าน

ตัวอย่าง: ให้ re=/ac-b/

จะเขียนการตรวจสอบรหัสผ่านใน JavaScript โดยใช้นิพจน์ปกติได้อย่างไร

นิพจน์ทั่วไปประกอบด้วยอักขระธรรมดารวมกับอักขระพิเศษ นิพจน์ทั่วไปถูกสร้างขึ้นตามพารามิเตอร์หรือข้อจำกัดของรหัสผ่านที่รัดกุม อักขระพิเศษจะใช้เมื่อมีการจับคู่สตริงหรืออักขระที่ยาก

โค้ด JavaScript ที่แสดงการใช้นิพจน์ทั่วไปด้านบนเพื่อค้นหาตัวอักษรตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก และตัวเลข นิพจน์ถูกสร้างขึ้นด้วยลำดับและลำดับที่ต่างกัน มีกฎเกณฑ์บางอย่างสำหรับอักขระแต่ละตัวที่ใช้ในนิพจน์ทั่วไป

ตัวอย่าง: ให้ number=/[0-9]/g. ยอมรับตัวเลขในช่วง 0-9

ชำระเงิน: โครงการ Javascript ใน Github

เรียนรู้ หลักสูตรซอฟต์แวร์ออนไลน์ จากมหาวิทยาลัยชั้นนำของโลก รับโปรแกรม PG สำหรับผู้บริหาร โปรแกรมประกาศนียบัตรขั้นสูง หรือโปรแกรมปริญญาโท เพื่อติดตามอาชีพของคุณอย่างรวดเร็ว

บทสรุป

การตรวจสอบรหัสผ่านมีความสำคัญ เนื่องจากช่วยให้ผู้ใช้สามารถสร้างรหัสผ่านที่รัดกุมและหลีกเลี่ยงการถอดรหัสรหัสผ่านที่อาจเกิดขึ้นได้ เมื่อใช้ JavaScript คุณสามารถเพิ่มการโต้ตอบและแจ้งให้ผู้ใช้ทราบจนกว่ารหัสผ่านจะมีอักขระที่จำเป็นทั้งหมดในลำดับใด ๆ นิพจน์ทั่วไปที่เข้ารหัสใน JavaScript มีบทบาทสำคัญในการกำหนดลำดับ มันนำพารามิเตอร์ที่เขียนลงไปยังโค้ด JavaScript

หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับการพัฒนาแบบฟูลสแตก โปรดดูโปรแกรม Executive PG ของ upGrad & IIIT-B ในการพัฒนาซอฟต์แวร์ฟูลสแตก ซึ่งออกแบบมาสำหรับมืออาชีพที่ทำงานและมีการฝึกอบรมที่เข้มงวดมากกว่า 500 ชั่วโมง โครงการและการมอบหมายมากกว่า 9 รายการ , สถานะศิษย์เก่า IIIT-B, โครงการหลักที่นำไปปฏิบัติได้จริง & ความช่วยเหลือด้านงานกับบริษัทชั้นนำ