التحقق من صحة الإدخال
تحقّق من الإدخال واعرض أخطاء مفيدة
التحقق من صحة الإدخال درس مجاني في Android Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Android Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Android Academy 4 دروس في المجموع.
لماذا نتحقق من صحة المدخلات؟
يرتكب المستخدمون الأخطاء: اسم فارغ، أو بريد إلكتروني غير صحيح، أو كلمة مرور قصيرة جدًا. تكتشف النماذج الجيدة هذه الأخطاء مبكرًا وتوضح ما يجب إصلاحه.
في هذا الدرس ستضيف التحقق من الصحة إلى نماذج Compose، وتعرض الأخطاء داخل الحقول، وتعطّل زر الإرسال حتى تصبح كل القيم صحيحة.
قاعدة التحقق ليست سوى دالة
اجعل منطق التحقق في صورة دوال Kotlin عادية تأخذ قيمة وتعيد ما إذا كانت صحيحة (أو رسالة خطأ). يجعل ذلك القواعد قابلة لإعادة الاستخدام وسهلة الاختبار.
إليك فحصًا بسيطًا للبريد الإلكتروني.
fun emailError(email: String): String? = when {
email.isBlank() -> "Email is required"
!email.contains("@") -> "Enter a valid email"
else -> null
}عرض الخطأ في الحقل
يحتوي OutlinedTextField على علامة isError وفتحة supportingText. اجمع بينهما لعرض حقل باللون الأحمر مع رسالة تحته.
يأتي الخطأ مباشرةً من دالة التحقق الخاصة بك.
var email by remember { mutableStateOf("") }
val error = emailError(email)
OutlinedTextField(
value = email,
onValueChange = { email = it },
label = { Text("Email") },
isError = error != null,
supportingText = { if (error != null) Text(error) }
)لا تُظهر الخطأ مبكرًا جدًا
إن عرض رسالة «البريد الإلكتروني مطلوب» قبل أن يلمس المستخدم الحقل حتى يبدو أسلوبًا منفّرًا. ومن الحلول الشائعة تتبّع ما إذا كان الحقل قد تلقى تفاعلًا، ثم عرض الأخطاء بعد ذلك فقط.
نحدّد هنا أن الحقل تلقى تفاعلًا بمجرد فقدانه التركيز.
var email by remember { mutableStateOf("") }
var touched by remember { mutableStateOf(false) }
val error = if (touched) emailError(email) else null
OutlinedTextField(
value = email,
onValueChange = { email = it },
label = { Text("Email") },
isError = error != null,
modifier = Modifier.onFocusChanged {
if (!it.isFocused) touched = true
}
)التحقق من صحة كلمة المرور
تتضمن كلمات المرور عادةً عدة قواعد. أعد أول قاعدة تفشل حتى يُصلح المستخدم أمرًا واحدًا في كل مرة.
لاحظ أن هذه لا تزال دالة خالصة لا تحتوي على أي واجهة مستخدم.
fun passwordError(pw: String): String? = when {
pw.length < 8 -> "At least 8 characters"
pw.none { it.isDigit() } -> "Add a number"
pw.none { it.isUpperCase() } -> "Add an uppercase letter"
else -> null
}التحقق بين الحقول
تتعلق بعض القواعد بحقلين، مثل «يجب أن تطابق كلمة المرور المؤكَّدة كلمة المرور». ولا يمكن وضع هذه القواعد في دالة خاصة بحقل واحد، لذا احسبها حيث تتوفر القيمتان.
var password by remember { mutableStateOf("") }
var confirm by remember { mutableStateOf("") }
val confirmError =
if (confirm.isNotEmpty() && confirm != password)
"Passwords don't match"
else nullتعطيل الإرسال حتى تصبح القيم صحيحة
يكون النموذج بالكامل صحيحًا عندما تنجح كل القواعد. احسب قيمة منطقية واحدة واستخدمها لتمكين زر الإرسال أو تعطيله.
يمنع ذلك المستخدم من إرسال بيانات غير صحيحة من الأساس.
val formValid =
emailError(email) == null &&
passwordError(password) == null &&
confirmError == null
Button(onClick = { submit() }, enabled = formValid) {
Text("Create Account")
}التحقق عند الإرسال
يوجّه التحقق داخل الحقول المستخدم، لكن ينبغي لك أيضًا إعادة فحص كل شيء عند الضغط على زر الإرسال. ويقرر معالج الإرسال ما إذا كان سيتابع العملية أو سيعرض جميع الأخطاء دفعة واحدة.
fun onSubmit() {
val errors = listOfNotNull(
emailError(email),
passwordError(password)
)
if (errors.isEmpty()) {
register(email, password)
} else {
// show errors / mark fields touched
}
}تقييد ما يمكن كتابته
يمكن أن يكون التحقق وقائيًا أيضًا. بالنسبة إلى رقم الهاتف، تجاهل ببساطة الأحرف غير الرقمية داخل onValueChange حتى لا تدخل المدخلات غير الصحيحة إلى الحالة أصلًا.
هذا ألطف من توبيخ المستخدم بعد ذلك.
var phone by remember { mutableStateOf("") }
OutlinedTextField(
value = phone,
onValueChange = { input ->
phone = input.filter { it.isDigit() }.take(10)
},
label = { Text("Phone") }
)تجميع التحقق في ViewModel
في الشاشات الفعلية، أبقِ التحقق في ViewModel بحيث تكتفي واجهة المستخدم بعرض النتائج. ويكشف ViewModel عن الأخطاء وعن علامة isValid.
يُبقي هذا العناصر القابلة للتركيب بسيطة، ويجعل قواعدك قابلة لاختبار الوحدة.
class SignUpViewModel : ViewModel() {
var email by mutableStateOf("")
private set
val emailError: String?
get() = emailError(email)
val isValid: Boolean
get() = emailError == null && email.isNotBlank()
fun onEmailChange(value: String) { email = value }
}Kotlin خالصة: اختبار القواعد
بما أن أدوات التحقق دوال خالصة، يمكنك تشغيلها في أي مكان. تُنفَّذ هنا قواعد البريد الإلكتروني وكلمة المرور بشكل مستقل، تمامًا كما يستدعيها اختبار وحدة.
fun emailError(email: String): String? = when {
email.isBlank() -> "Email is required"
!email.contains("@") -> "Enter a valid email"
else -> null
}
fun main() {
println(emailError(""))
println(emailError("nope"))
println(emailError("ada@dev.io"))
}تحقق سريع
ما زوج الخاصيتين في OutlinedTextField المستخدم لتحديد أن الحقل غير صالح وعرض رسالة أسفله؟
مراجعة
أصبحت الآن تتحقق من صحة نماذج Compose بطريقة واضحة:
- أبقِ القواعد في صورة دوال خالصة تعيد رسالة خطأ أو القيمة null.
- اعرض الأخطاء باستخدام
isError+supportingText، وتجنب عرضها قبل أن يتلقى الحقل تفاعلًا. - عالج القواعد بين الحقول حيث تكون القيمتان مرئيتين.
- عطّل الإرسال حتى يصبح النموذج بالكامل صحيحًا، وأعد التحقق عند الإرسال.
- امنع المدخلات غير الصحيحة باستخدام
filter، واجمع القواعد في ViewModel.
التالي: أنواع لوحات المفاتيح، وإجراءات IME، وإدارة التركيز.
الأسئلة الشائعة
هل درس «التحقق من صحة الإدخال» مجاني؟
نعم — نص درس «التحقق من صحة الإدخال» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Android Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Android Academy 4 دروس في المجموع.
ماذا ستتعلم في «التحقق من صحة الإدخال»؟
تحقّق من الإدخال واعرض أخطاء مفيدة تتمرن على Android Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Android Academy؟
لا تُشترط خبرة سابقة. Android Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «التحقق من صحة الإدخال»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Android Academy هذا؟
نعم. كل درس في Android Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- TextField وإدخال المستخدم
- إدارة حالة النموذج
- التحقق من صحة الإدخال
- خيارات لوحة المفاتيح وإجراءاتها