จำเป็นต้องใส่ฟิลด์ยืนยันรหัสผ่านเมื่อสร้างแบบฟอร์มออนไลน์ที่ขอให้ผู้ใช้ตั้งรหัสผ่าน ฟิลด์รหัสผ่านจะซ่อนการป้อนข้อมูลของผู้ใช้โดยค่าเริ่มต้น ทำให้จำเป็นต้องมีกลไกบางอย่างที่อนุญาตให้ผู้ใช้ยืนยันว่าพวกเขาได้เขียนรหัสผ่านที่ถูกต้องโดยไม่ต้องพิมพ์ผิด ฟิลด์ยืนยันรหัสผ่านจะแจ้งให้ผู้ใช้ตรวจสอบรหัสผ่านอีกครั้งหากพวกเขาพิมพ์อักขระผิดและรหัสผ่านและฟิลด์ยืนยันรหัสผ่านไม่ตรงกัน
ในโพสต์นี้ เป้าหมายของเราคือการสร้างรูปแบบ HTML ที่ตรงกับข้อมูลที่ผู้ใช้ป้อนใน รหัสผ่าน และ ยืนยันรหัสผ่าน เพื่อยืนยันว่าผู้ใช้พิมพ์รหัสผ่านที่ถูกต้องหรือพิมพ์ผิด
ขั้นตอนที่ 1: แบบฟอร์ม HTML
ขั้นตอนแรกคือการสร้างแบบฟอร์ม HTML ที่รับข้อมูลจากผู้ใช้:
< ศูนย์กลาง >
< ชั่วโมง2 > คำแนะนำ Linux ชั่วโมง2 >
< รูปร่าง >
< พี > ใส่รหัสผ่าน พี >
< ป้อนข้อมูล พิมพ์ = 'รหัสผ่าน' id = 'ผ่าน' > < br >< br >
< พี > ยืนยันรหัสผ่าน พี >
< ป้อนข้อมูล พิมพ์ = 'รหัสผ่าน' id = 'ยืนยันพาส' > < br >< br >
< ปุ่ม พิมพ์ = 'ส่ง' เมื่อคลิก = 'การยืนยันรหัสผ่าน()' > บันทึก ใน ปุ่ม >
รูปร่าง >
ศูนย์กลาง >
เราได้สร้างแบบฟอร์ม HTML อย่างง่ายซึ่งมีช่องใส่รหัสผ่านประเภทสองช่องและปุ่มเข้าสู่ระบบซึ่งเรียกว่า การยืนยันรหัสผ่าน() ทำงานเมื่อมีการคลิก
ขั้นตอนที่ 2: การตรวจสอบแบบฟอร์ม JavaScript
ตอนนี้เราจะเขียนโค้ด JavaScript ภายใน การยืนยันรหัสผ่าน() ฟังก์ชั่นที่ตรวจสอบรหัสผ่าน:
การทำงาน การยืนยันรหัสผ่าน ( ) {
รหัสผ่าน var = document.getElementById ( 'ผ่าน' ) .ค่า;
var confirmPassword = document.getElementById ( 'ยืนยันพาส' ) .ค่า;
ถ้า ( รหัสผ่าน == '' ) {
เตือน ( 'ข้อผิดพลาด: ฟิลด์รหัสผ่านว่างเปล่า' ) ;
} อื่น ถ้า ( รหัสผ่าน == ยืนยันรหัสผ่าน ) {
เตือน ( 'เข้าสู่ระบบ' ) ;
} อื่น {
เตือน ( 'โปรดตรวจสอบให้แน่ใจว่ารหัสผ่านของคุณตรงกัน' )
}
}
ข้างใน การยืนยันรหัสผ่าน() ฟังก์ชันแรกเราได้รับค่าของรหัสผ่านและยืนยันฟิลด์รหัสผ่านและเก็บไว้ในตัวแปร จากนั้นเราใช้คำสั่งแบบมีเงื่อนไขเพื่อตรวจสอบกรณีต่างๆ
กรณีที่ 1: ฟิลด์รหัสผ่านว่างเปล่า
เงื่อนไขแรกจะตรวจสอบว่าฟิลด์รหัสผ่านว่างเปล่าหรือไม่ เราแจ้งให้ผู้ใช้พิมพ์รหัสผ่านหากฟิลด์ว่างเปล่า:
กรณีที่ 2: รหัสผ่านตรงกัน
ในกรณีที่รหัสผ่านตรงกับผู้ใช้เข้าสู่ระบบสำเร็จ:
กรณีที่ 3: รหัสผ่านไม่ตรงกัน
หากรหัสผ่านไม่ตรงกัน เราจะขอให้ผู้ใช้พิมพ์รหัสผ่านอีกครั้งและตรวจสอบให้แน่ใจว่าตรงกัน:
โค้ด JavaScript และ HTML รวมกันมีลักษณะดังนี้:
< html >
< ร่างกาย >
< ศูนย์กลาง >
< ชั่วโมง2 > คำแนะนำ Linux ชั่วโมง2 >
< รูปร่าง >
< พี > ใส่รหัสผ่าน พี >
< ป้อนข้อมูล พิมพ์ = 'รหัสผ่าน' id = 'ผ่าน' > < br >< br >
< พี > ยืนยันรหัสผ่าน พี >
< ป้อนข้อมูล พิมพ์ = 'รหัสผ่าน' id = 'ยืนยันพาส' > < br >< br >
< ปุ่ม พิมพ์ = 'ส่ง' เมื่อคลิก = 'การยืนยันรหัสผ่าน()' > บันทึก ใน ปุ่ม >
รูปร่าง >
ศูนย์กลาง >
ร่างกาย >
< สคริปต์ >
การทำงาน การยืนยันรหัสผ่าน ( ) {
รหัสผ่าน var = document.getElementById ( 'ผ่าน' ) .ค่า;
var confirmPassword = document.getElementById ( 'ยืนยันพาส' ) .ค่า;
ถ้า ( รหัสผ่าน == '' ) {
เตือน ( 'ข้อผิดพลาด: ฟิลด์รหัสผ่านว่างเปล่า' ) ;
} อื่น ถ้า ( รหัสผ่าน == ยืนยันรหัสผ่าน ) {
เตือน ( 'เข้าสู่ระบบ' ) ;
} อื่น {
เตือน ( 'โปรดตรวจสอบให้แน่ใจว่ารหัสผ่านของคุณตรงกัน' )
}
}
สคริปต์ >
html >
บทสรุป
มนุษย์มักจะทำผิดพลาดได้ แต่ก็ไม่ควรกีดกันพวกเขาจากการลงชื่อเข้าใช้บัญชีของตน แม้แต่ความผิดพลาดเพียงเล็กน้อยในการป้อนรหัสผ่านก็สามารถจำกัดการเข้าถึงบัญชีของผู้ใช้ได้ ดังนั้นจึงควรตรวจสอบรหัสผ่านของผู้ใช้อีกครั้งเพื่อยืนยันว่าพวกเขาได้ป้อนรหัสผ่านที่ถูกต้อง