تحقق من صحة البريد الإلكتروني ورقم الهاتف في مربع نص واحد باستخدام HTML5 وJavaScript

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

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

htmlCopy code
<input type="text" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$|^\d{10}$" title="Enter a valid email or mobile number" required>
<button onclick="validate()">Validatebutton>

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

ثانيًا، يمكنك استخدام JavaScript للتحقق من القيمة المدخلة بعد النقر على الزر. فيما يلي مثال عن كيفية تنفيذ ذلك باستخدام JavaScript:

javascriptCopy code
function validate() {
    var input = document.querySelector('input');
    var pattern = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$|^\d{10}$/;

    if (pattern.test(input.value)) {
        alert('Valid input');
    } else {
        alert('Invalid input. Please enter a valid email or mobile number.');
    }
}

هذا السكريبت يستخدم تعبيرًا منتظمًا للتحقق مرة أخرى من النمط، ويظهر تنبيهًا يشير إلى صحة أو خطأ الإدخال.

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

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

1. التحقق باستخدام HTML5:

   • فيما يخص صحة عنوان البريد الإلكتروني، يمكننا الاستفادة من خاصية type="email" في علامة ، والتي تقوم بالتحقق تلقائيًا من أن القيمة المدخلة تشبه عنوان بريد إلكتروني.
   • بالنسبة لرقم الهاتف المحمول، يمكنك استخدام type="tel" لتحديد أن الإدخال يجب أن يكون رقم هاتف.

   htmlCopy code
   <input type="email" title="Enter a valid email" required>
   <input type="tel" title="Enter a valid mobile number" required>
   

2. استخدام AngularJS للتحقق:

   • في حال استخدام AngularJS، يمكنك الاستعانة بـ ng-pattern لتحديد نمط التحقق لكل حقل.
   • في المثال أدناه، تم استخدام ng-pattern لتحديد نمط لعنوان البريد الإلكتروني ورقم الهاتف المحمول.

   htmlCopy code
   <input type="text" ng-pattern="/^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$|^\d{10}$/" title="Enter a valid email or mobile number" ng-model="inputValue" required>
   

3. استخدام jQuery للتحقق:

   • إذا كنت تستخدم jQuery، يمكنك استخدام الاستعلامات للتحقق من القيمة المدخلة.
   • في المثال أدناه، تم استخدام الاستعلام لفحص صحة عنوان البريد الإلكتروني ورقم الهاتف المحمول.

   javascriptCopy code
   $('#validateButton').click(function() {
       var inputValue = $('#inputField').val();
       var pattern = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$|^\d{10}$/;
   
       if (pattern.test(inputValue)) {
           alert('Valid input');
       } else {
           alert('Invalid input. Please enter a valid email or mobile number.');
       }
   });
   

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