تحقق صحة إدخال بريد إلكتروني في تطبيق React Native

في عالم تطوير التطبيقات باستخدام React Native، يعتبر التحقق من قيم مدخلات المستخدم أمرًا ضروريًا لضمان أمان وصحة البيانات التي يدخلها المستخدم. أحد السيناريوهات الشائعة هو التحقق من صحة عنوان البريد الإلكتروني الذي يتم إدخاله في TextInput. في هذا السياق، يمكننا استخدام مكتبة مثل “validate-email-address” لتسهيل عملية التحقق.

أولاً وقبل كل شيء، يجب تثبيت المكتبة باستخدام npm أو yarn، وذلك عبر الأمر التالي:

bashCopy code
npm install validate-email-address

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

jsxCopy code
import React, { useState } from 'react';
import { TextInput, Text, View } from 'react-native';
import validateEmail from 'validate-email-address';

const EmailValidationExample = () => {
  const [email, setEmail] = useState('');
  const [isValidEmail, setValidEmail] = useState(true);

  const handleEmailChange = (input) => {
    setEmail(input);
    // قم بالتحقق من صحة عنوان البريد الإلكتروني باستخدام المكتبة
    setValidEmail(validateEmail(input));
  };

  return (
    <View>
      <Text>ادخل عنوان بريد إلكتروني:Text>
      <TextInput
        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
        onChangeText={handleEmailChange}
        value={email}
      />
      {!isValidEmail && <Text style={{ color: 'red' }}>عنوان بريد إلكتروني غير صالحText>}
    View>
  );
};

export default EmailValidationExample;

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

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

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

1. تحقق من الأحرف المسموح بها:
   يمكنك تقييد الأحرف المسموح بها في TextInput باستخدام TextInput props مثل keyboardType و autoCapitalize. على سبيل المثال:

   jsxCopy code
   <TextInput
     style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
     onChangeText={handleEmailChange}
     value={email}
     keyboardType="email-address"
     autoCapitalize="none"
   />
   

   هذا يضمن أن يتم إدخال عنوان البريد الإلكتروني بشكل صحيح ويقلل من الأخطاء الطباعية.

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

   jsxCopy code
   const handleEmailChange = (input) => {
     setEmail(input);
   
     if (!input) {
       setValidEmail(true); // يتم تجاوز التحقق إذا لم يكن هناك محتوى
       return;
     }
   
     setValidEmail(validateEmail(input));
   };
   

   وفي قسم الرسائل:

   jsxCopy code
   {!isValidEmail && email && (
     <Text style={{ color: 'red' }}>عنوان البريد الإلكتروني غير صالحText>
   )}
   {!email && <Text style={{ color: 'orange' }}>الرجاء إدخال عنوان بريد إلكترونيText>}
   

   هذا يوفر رسائل خطأ أكثر دقة وتوجيها للمستخدم.

3. تخصيص شكل ال TextInput:
   يمكن تخصيص مظهر TextInput باستخدام العديد من الخصائص مثل style و placeholder. يمكنك تعزيز تجربة المستخدم بتوفير تحسينات بصرية.

   jsxCopy code
   <TextInput
     style={{
       height: 40,
       borderColor: isValidEmail ? 'gray' : 'red',
       borderWidth: 1,
       paddingHorizontal: 10,
     }}
     onChangeText={handleEmailChange}
     value={email}
     placeholder="ادخل عنوان بريد إلكتروني"
   />
   

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

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