אימות הקלט בזמן שהמשתמש מקלידים

אתם יכולים לאמת את הקלט בזמן שהמשתמש מקליד בשדה טקסט, למשל כשמזינים שם, כתובת אימייל, כתובת או פרטים אחרים ליצירת קשר. האימות הזה מצמצם את מספר השגיאות וחוסך זמן למשתמשים.

תוצאות

קלט טקסט תקין
איור 1. שדה להזנת טקסט עם מאמתים של כתובות אימייל שלא מציגים הודעות שגיאה לגבי כתובת אימייל תקינה.
קלט טקסט לא תקין עם שגיאות
איור 2. שדה להזנת טקסט שמוצגת בו הודעת שגיאה כשמזינים כתובת אימייל לא תקינה.

תאימות גרסאות

כדי להטמיע את התכונה הזו, צריך להגדיר את minSDK של הפרויקט לרמת API‏ 21 ומעלה.

פניות קשורות

אימות הקלט בזמן שהמשתמש מקליד

אפשר להשתמש בקוד הבא כדי להציג את הקלט בשדה ולאמת את הטקסט בזמן שהמשתמש מקליד. אם המידע לא מאומת, הודעת שגיאה עוזרת למשתמש לתקן את הקלט.

class EmailViewModel : ViewModel() {
    var email by mutableStateOf("")
        private set

    val emailHasErrors by derivedStateOf {
        if (email.isNotEmpty()) {
            // Email is considered erroneous until it completely matches EMAIL_ADDRESS.
            !android.util.Patterns.EMAIL_ADDRESS.matcher(email).matches()
        } else {
            false
        }
    }

    fun updateEmail(input: String) {
        email = input
    }
}

@Composable
fun ValidatingInputTextField(
    email: String,
    updateState: (String) -> Unit,
    validatorHasErrors: Boolean
) {
    OutlinedTextField(
        modifier = Modifier
            .fillMaxWidth()
            .padding(10.dp),
        value = email,
        onValueChange = updateState,
        label = { Text("Email") },
        isError = validatorHasErrors,
        supportingText = {
            if (validatorHasErrors) {
                Text("Incorrect email format.")
            }
        }
    )
}

@Preview
@Composable
fun ValidateInput() {
    val emailViewModel: EmailViewModel = viewModel<EmailViewModel>()
    ValidatingInputTextField(
        email = emailViewModel.email,
        updateState = { input -> emailViewModel.updateEmail(input) },
        validatorHasErrors = emailViewModel.emailHasErrors
    )
}

מידע חשוב על הקוד

  • הגדרת קומפוזיציה שמשתמשת מחדש ברכיב OutlinedTextField, והוספת הפרמטרים הנדרשים להצגת הודעות שגיאה של כלי התיקוף בזמן שהמשתמש מקליד.
  • EmailViewModel משמש לשמירת המצב ולספק את הלוגיקה של אימות כתובת האימייל.
  • אם הערך של isError הוא True, ממשק המשתמש מספק אינדיקטור חזותי למצב של שגיאת אימות.
  • הרכיב יציג את ההודעה 'פורמט אימייל שגוי' עד שתוזן כתובת אימייל מלאה ותקינה.

אוספים שכוללים את המדריך הזה

המדריך הזה הוא חלק מאוספים של מדריכים מהירים בנושאים שקשורים ליעדים רחבים יותר בפיתוח ל-Android:

טקסט הוא חלק מרכזי בכל ממשק משתמש. כדאי לנסות דרכים שונות להצגת טקסט באפליקציה כדי לספק חוויית משתמש נעימה.
כאן מוסבר איך להטמיע דרכים שבהן המשתמשים יכולים לקיים אינטראקציה עם האפליקציה באמצעות הזנת טקסט ושימוש באמצעי קלט אחרים.

יש לך שאלות או משוב?

אפשר לעבור לדף השאלות הנפוצות שלנו כדי לקרוא מדריכים מהירים, או לפנות אלינו ולספר לנו מה דעתך.