تعديل تنسيق إدخال تاريخ الميلاد باستخدام جافا سكريبت

في البداية، يظهر لي أن لديك سيناريو في برمجة جافا سكريبت (JavaScript) يتعامل مع إدخال المستخدم لتاريخ الميلاد. هدفك هو تعديل تنسيق الإدخال وضبط الصياغة لتلبية متطلبات محددة. سأقوم بتوضيح الخطوات التي يمكن اتخاذها لتحقيق هذه المتطلبات.

أولًا وقبل كل شيء، يجب أن نتعامل مع الصيغة الجديدة لتاريخ الميلاد. في حالتك، تريد الصيغة أن تكون في شكل “يوم/شهر/سنة”. لتحقيق ذلك، يمكنك تعديل متغير dob بحيث يدعم هذا التنسيق. يمكنك استخدام التعبير العادي التالي:

javascriptCopy code
const dob = /^([0-2]?[0-9]|3[0-1])\/(0?[1-9]|1[0-2])\/(19|20)\d{2}$/;

هذا التعبير العادي يقبل الأيام من 01 إلى 31، والشهور من 01 إلى 12، والسنوات في القرنين 19 و 20.

ثانيًا، بما أنك ترغب في منع إدخال أحرف النص وتحديد الطول الأقصى للإدخال، يمكنك إضافة بعض الشروط إلى الكود. على سبيل المثال:

javascriptCopy code
$('.required-input').each(function() {
    $(this).on('input keyup keypress blur change', function() {
        const dob = /^([0-2]?[0-9]|3[0-1])\/(0?[1-9]|1[0-2])\/(19|20)\d{2}$/;
        var regex;

        if ($(this).attr("id") == "date_of_birth") {
            regex = dob;

            // التحقق من الطول الأقصى للإدخال
            if ($(this).val().length > 10) {
                // إذا كان الإدخال أطول من 10 أحرف، قم بتقليصه
                $(this).val($(this).val().substr(0, 10));
            }

            // إذا كان هناك أحرف غير أرقام، قم بإزالتها
            var sanitizedInput = $(this).val().replace(/[^0-9/]/g, '');
            $(this).val(sanitizedInput);
        }

        // SOME CODE JS:
    });
});

هذا الكود يقوم بالتحقق من الطول الأقصى للإدخال (10 أحرف) ويقوم بإزالة أي أحرف غير رقمية.

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

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

أولاً، بخصوص تنسيق تاريخ الميلاد، لقد قمت بتعديل متغير dob ليدعم صيغة “يوم/شهر/سنة”. يمكنك توضيح هذا التعديل للمستخدم بشكل أفضل في التعليقات بالكود. على سبيل المثال:

javascriptCopy code
// تعبير عادي لتنسيق "يوم/شهر/سنة"
const dob = /^([0-2]?[0-9]|3[0-1])\/(0?[1-9]|1[0-2])\/(19|20)\d{2}$/;

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

javascriptCopy code
// التحقق من الطول الأقصى للإدخال
if ($(this).val().length > 10) {
    // إذا كان الإدخال أطول من 10 أحرف، قم بتقليصه
    $(this).val($(this).val().substr(0, 10));
}

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

javascriptCopy code
// إذا كان هناك أحرف غير أرقام، قم بإزالتها
var sanitizedInput = $(this).val().replace(/[^0-9/]/g, '');
$(this).val(sanitizedInput);

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