การทำความเข้าใจ Javascript Regex: แก้ไขปัญหาการตรวจสอบชื่อแสดงผลทั่วไป

หากคุณเพิ่งเริ่มต้นในการพัฒนาเว็บ คุณอาจพบว่าตนเองต้องจัดการกับ regex (นิพจน์ปกติ) ใน Javascript หนึ่งในการใช้งานที่พบบ่อยคือการตรวจสอบข้อมูลที่ผู้ใช้ป้อน เช่น ชื่อแสดงผลในระหว่างการลงทะเบียน ในโพสต์บล็อกนี้ เราจะจัดการกับปัญหาหนึ่ง: วิธีการตรวจสอบชื่อแสดงผลอย่างถูกต้องเพื่ออนุญาตเฉพาะตัวอักษร ตัวเลข และขีดล่าง

ปัญหาที่เกิดขึ้น

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

<form method="post" action="/" onsubmit="return check_form()">
    <input type="text" id="display-name" name="display-name" maxlength="255" />
    <input type="submit" />
</form>
<script type="text/javascript">
    var name_regex = /^([a-zA-Z0-9_])+/;

    function check_form() {
        if (!name_regex.test(document.forms[0].elements[0].value)) {
            document.forms[0].elements[0].focus();
            alert("ชื่อแสดงผลของคุณสามารถประกอบด้วยเฉพาะตัวอักษร ตัวเลข และขีดล่างเท่านั้น");
            return false;
        }
    }
</script>

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

การวิเคราะห์ปัญหา Regex

คำอธิบาย Regex ปัจจุบัน

regex ที่ใช้ในปัจจุบันคือ: /^([a-zA-Z0-9_])+/

นี่คือสิ่งที่มันทำ:

1. เริ่มต้นด้วย (^): รูปแบบเริ่มต้นด้วยจุดเริ่มต้นของสตริง
2. ตรวจสอบ (([a-zA-Z0-9_])+): มันตรวจสอบหาตัวอักษร (ทั้งสองกรณี) ตัวเลข หรือขีดล่างหนึ่งตัวหรือมากกว่า

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

วิธีแก้ไข: ปรับเปลี่ยน Regex

เป้าหมายคือการรับรองว่าสตริงทั้งหมดประกอบด้วยตัวอักษรที่ถูกต้อง เพื่อให้บรรลุเป้าหมายนี้เราจำเป็นต้องปรับปรุง regex เพื่อบังคับทางเลือกต่อไปนี้:

• ต้องเริ่มต้นด้วยตัวอักษรที่ถูกต้อง
• ต้องสิ้นสุดหลังจากตัวอักษรที่ถูกต้อง ไม่อนุญาตให้มีสิ่งอื่น

regex ที่ปรับปรุงแล้วควรมีลักษณะดังนี้:

/^([a-zA-Z0-9_]+)$/

• เพิ่ม ($): สัญลักษณ์ดอลลาร์ที่ตอนท้ายทำการจับคู่กับจุดสิ้นสุดของสตริง การรวมนี้ยืนยันว่าอนุญาตให้มีเพียงตัวอักษร ตัวเลข หรือขีดล่างตลอดทั้งสตริงเท่านั้น

การปรับปรุงโค้ด: แนวทางที่มีความแข็งแกร่งมากขึ้น

การเข้าถึงองค์ประกอบของฟอร์ม

นอกจากนี้ ในขณะที่โค้ดปัจจุบันใช้ document.forms วิธีที่เป็นมาตรฐานและเชื่อถือได้มากกว่าคือการเข้าถึงข้อมูลอินพุตโดยตรงโดยใช้ ID ซึ่งสามารถทำให้โค้ดของคุณสะอาดขึ้นและเสี่ยงต่อปัญหาน้อยลงหากคุณตัดสินใจที่จะเปลี่ยนโครงสร้างของ HTML ของคุณ

นี่คือวิธีที่คุณสามารถปรับฟังก์ชัน check_form:

function check_form() {
    var displayName = document.getElementById('display-name').value;
    if (!name_regex.test(displayName)) {
        document.getElementById('display-name').focus();
        alert("ชื่อแสดงผลของคุณสามารถประกอบด้วยเฉพาะตัวอักษร ตัวเลข และขีดล่างเท่านั้น");
        return false;
    }
}

บทสรุป

การมั่นใจว่าการป้อนข้อมูลของผู้ใช้ถูกต้องเป็นสิ่งสำคัญในพัฒนาเว็บ ด้วยการปรับปรุงเพียงเล็กน้อยกับ regex ของคุณและวิธีการเข้าถึงองค์ประกอบฟอร์ม คุณสามารถพัฒนาฟอร์มลงทะเบียนของคุณได้อย่างมาก โดยการนำรูปแบบ regex ที่แก้ไขแล้ว /^([a-zA-Z0-9_]+)$/ และการใช้ document.getElementById แอปพลิเคชันของคุณจะน่าเชื่อถือและใช้งานง่ายมากขึ้น

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