فهم التعبيرات العادية في جافاسكريبت: إصلاح مشكلات التحقق من صحة أسماء العرض الشائعة

إذا كنت قد بدأت مؤخرًا في تطوير الويب، فقد تجد نفسك تعاني من التعامل مع التعابير العادية (regular expressions) في جافاسكريبت. من الاستخدامات الشائعة لها هو التحقق من إدخالات المستخدم، مثل اسم العرض أثناء التسجيل. في هذه التدوينة، نتناول مشكلة معينة: كيفية التحقق بشكل صحيح من اسم العرض للسماح فقط بالحروف والأرقام والشرطات السفلية.

المشكلة المطروحة

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

<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>

رغم النوايا الحسنة، فإن هذه الشيفرة فشلت في تقييد اسم العرض بشكل صحيح. دعونا نستكشف سبب حدوث ذلك وكيفية إصلاحه.

تحليل مشكلة التعبيرات العادية

شرح التعبير العادي الحالي

التعبير العادي الحالي المستخدم هو: /^([a-zA-Z0-9_])+

إليك ما يقوم به:

1. يبدأ بـ (^): تبدأ النمط مع بداية السلسلة.
2. يتحقق من (([a-zA-Z0-9_])): يتحقق من وجود حرف واحد أو أكثر (كلا الحالتين)، أرقام، أو شُرَط سفلية.

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

الحل: تعديل التعبير العادي

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

• يجب أن يبدأ بحرف صالح.
• يجب أن ينتهي مباشرة بعد حرف صالح، مما يمنع أي شيء آخر.

يجب أن يبدو التعبير العادي المعدل كالتالي:

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

• تمت الإضافة ($): علامة الدولار في النهاية تطابق نهاية السلسلة. هذه الإضافة تؤكد أن الحروف والأرقام أو الشُرط السفلية مسموح بها في جميع أنحاء السلسلة.

تحسين الشيفرة: نهج أكثر قوة

الوصول إلى عناصر النموذج

علاوة على ذلك، بينما تستخدم الشيفرة الحالية document.forms، فإن طريقة أكثر معيارية وموثوقية هي الوصول مباشرة إلى المدخل من خلال معرفه. يمكن أن يجعل هذا الشيفرة الخاصة بك أكثر وضوحًا وأقل عرضة للمشكلات إذا قررت تغيير هيكل الـ 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;
    }
}

الخاتمة

يعد التأكد من صحة إدخالات المستخدم أمرًا حيويًا في تطوير الويب. مع عدد قليل من التعديلات على تعبيرك العادي وكيفية الوصول إلى عناصر النموذج، يمكنك تعزيز نماذج التسجيل الخاصة بك بشكل كبير. من خلال اعتماد نمط التعبير العادي المعدل /^([a-zA-Z0-9_]+)$/ واستخدام document.getElementById، سيصبح تطبيقك أكثر موثوقية وسهولة في الاستخدام.

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