โค้ดยืนยันรหัสผ่าน PHP จากรหัสผ่าน 2 ช่อง ด้วย JavaScript

สอนเขียนโค้ดยืนยันรหัสผ่าน PHP ด้วย JavaScript บทความนี้แนะนำการเขียน JavaScript เพื่อยืนยันรหัสผ่านจากช่อง input text 2 ช่องว่าตรงกันหรือไม่ หากไม่ตรงกันต้องให้ผู้ใช้งานกรอกรหัสผ่านใหม่ สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง โค้ดยืนยันรหัสผ่าน PHP จากรหัสผ่าน 2 ช่อง ด้วย JavaScript

<form action="register.php" method="post" onsubmit="return checkPassword()">
    รหัสผ่าน <input type="password" id="password_1">
    <br/>
    ยืนยันรหัสผ่าน <input type="password" id="password_2">
    <br/>
    <input type="submit" value="ตกลง">
</form>

<script>
    function checkPassword() {
        let password_1 = document.getElementById("password_1");
        let password_2 = document.getElementById("password_2");
        if( password_1.value != password_2.value ) {
            alert("กรุณากรอกรหัสผ่าน และยืนยันรหัสผ่านให้ตรงกัน");
            return false;
        }
    }
</script>

1. โค้ดยืนยันรหัสผ่าน PHP ด้วย JavaScript เริ่มจากสร้างฟอร์ม HTML พร้อมช่องกรอก 2 ช่อง คือ รหัสผ่าน และยืนยันรหัสผ่าน

2. เมื่อผู้ใช้งานกดคลิกปุ่ม submit โปรแกรมจะเข้าไปทำงานในฟังก์ชัน checkPassword ของภาษา JavaScript จากคำสั่ง onsubmit="return checkPassword()"

3. อ้างถึง id = password_1 และ password_2 ของช่อง TextBox ทั้ง 2 ของฟอร์ม HTML และใช้คำสั่ง if ร่วมกับคำสั่ง value เพื่อเช็คเงื่อนไขว่า password_1 และ password_2 มีค่าตรงกันหรือไม่

4. กรณีค่าทั้ง 2 ไม่ตรงกันให้ แสดง alert ข้อความแจ้งเตือน พร้อม return false เพื่อให้ผู้ใช้งานกรอกรหัสผ่านทั้ง 2 ช่องให้ตรงกัน