Valider la saisie à mesure que l'utilisateur saisit du texte

Vous pouvez valider la saisie lorsque l'utilisateur saisit un nom, une adresse e-mail, une adresse ou d'autres coordonnées dans un champ de texte. Cette validation réduit les erreurs et fait gagner du temps à vos utilisateurs.

Compatibilité des versions

Cette implémentation nécessite que la version minimale du SDK de votre projet soit définie sur le niveau d'API 21 ou supérieur.

Dépendances

Valider la saisie à mesure que l'utilisateur saisit du texte

Utilisez le code suivant pour afficher la saisie du champ et valider le texte pendant que l'utilisateur saisit du texte. Si les informations ne sont pas validées, un message d'erreur aide l'utilisateur à corriger la saisie.

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
    )
}
TextSnippets.kt

Points clés concernant le code

  • Définit un composable qui réutilise le composant OutlinedTextField, en ajoutant les paramètres requis pour afficher les messages d'erreur de l'outil de validation en tant que types d'utilisateurs.
  • EmailViewModel permet de conserver l'état et de fournir la logique de validation de l'adresse e-mail.
  • Si isError est défini sur "True", l'UI fournit un indicateur visuel de l'état d'erreur de validation.
  • Le composant affiche "Format d'adresse e-mail incorrect" jusqu'à ce qu'une adresse e-mail complète et correcte soit saisie.

Résultats

Saisie de texte valide
Figure 1. Champ de saisie de texte avec des validateurs d'adresse e-mail n'affichant aucun message d'erreur pour une adresse e-mail valide.
Saisie de texte incorrecte avec des erreurs
Figure 2 Champ de saisie de texte affichant un message d'erreur lorsqu'une adresse e-mail non valide est saisie.

Collections contenant ce guide

Ce guide fait partie de ces collections de guides rapides sélectionnées qui couvrent des objectifs de développement Android plus larges:

Texte à afficher

Le texte est un élément central de n'importe quelle interface utilisateur. Découvrez les différentes façons de présenter du texte dans votre application pour offrir une expérience utilisateur agréable.
Collection de guides rapides
Découvrez comment permettre aux utilisateurs d'interagir avec votre application en saisissant du texte et en utilisant d'autres modes de saisie.
Collection de guides rapides

Vous avez des questions ou des commentaires ?

Consultez notre page des questions fréquentes et découvrez les guides rapides, ou contactez-nous pour nous faire part de vos commentaires.
Accéder aux questions fréquentes Envoyer des commentaires