Maintenant, pour valider ce que l'utilisateur a
entré, je veux bien sûr faire quelque chose à chaque frappe.
Maintenant, nous avons déjà mis onChangeText ici en tant qu'auditeur sur le titre par exemple et
ce que nous faisons maintenant, c'est que nous définissons le titre dans notre état.
Maintenant, l'étape suivante consiste non seulement à faire cela,
donc à ne pas simplement enregistrer l'entrée mais aussi à la valider et également à gérer la validité de cette entrée
dans un état.
Donc, par conséquent, je vais ajouter une nouvelle fonction ici, par exemple le gestionnaire de changement de titre qui obtient le texte entré et peut ensuite faire quelque chose et je
vais juste l'externaliser dans une fonction nommée distincte pour avoir un peu plus propre, plus facile
à suivre le long du code parce que maintenant je vais lier cet écouteur ici à mon événement onChangeText, afin que cette
fonction se déclenche à chaque frappe et là bien sûr, je vais toujours définir mon titre avec le texte mais maintenant en
plus comme
je l'ai dit, je veux aussi gérer la validité et pour cela
nous pouvons ajouter un autre état que nous voulons gérer.
Donc, peut-être qu'après avoir géré la valeur du titre, nous pouvons également avoir le titre est un état valide ou tout
ce que vous voulez l'appeler et ajouter le titre d'ensemble est ici valide en tant que fonction
de définition, puis cet état ici initialement
pourrait être faux afin que nous traitions initialement ce n'est pas valide. Maintenant, pour chaque frappe ici dans le gestionnaire de changement de titre, avant que
nous puissions le stocker et mettre à jour notre état de titre, nous pouvons bien sûr le valider et maintenant
c'est à vous de décider comment vous voulez le valider.
Maintenant, par exemple, vous pouvez dire que cela n'est valable que si vous avez un texte qui n'est pas vide, donc si la longueur du texte
est supérieure à zéro. Le texte est une chaîne
bien sûr, donc si la longueur est nulle, cela signifie que c'est une chaîne vide.
Nous pouvons également appeler du texte. couper pour couper les espaces blancs en excès de sorte que juste un tas d'espaces blancs ne
soit pas non plus considéré comme valide.
Bien sûr, vous pouvez également ajouter une validation de longueur minimale ou maximale en vérifiant la longueur ici, vous pouvez
ajouter une validation d'expression régulière pour vérifier le texte de certains modèles et c'est en fait quelque
chose que nous ferons plus tard, mais pour
commencer, je vais il suffit de le vérifier comme
ça et maintenant ici, si nous sommes supérieurs à zéro, nous allons bien,
mais en fait, si nous avons une longueur de zéro, nous ne sommes pas bien.
Donc ici, je veux
définir le titre est valide à faux, sinon nous définissons le titre est valide à
vrai
bien sûr, donc si nous avons une entrée
valide et nous allons toujours définir le titre lui-même, nous devons toujours le stocker, nous
ne doit jamais perdre cette entrée
utilisateur sinon nous cassons l'application.
Et maintenant, avec la validité du titre stockée dans l'état, nous pouvons bien sûr l'utiliser ici dans notre code jsx
pour vérifier si le titre n'est pas valide par exemple et si c'est le cas, nous pouvons sortir
dynamiquement un texte ici où nous disons par exemple veuillez entrer un titre valide pour afficher ici un petit message d'erreur
auquel vous pouvez également attribuer un style.
Maintenant, avec cela, vous voyez que si nous allons à notre entrée ici, nous voyons que le message d'erreur
dès le début parce que nous commençons dans un état non valide et si nous commençons à
taper, cela disparaît mais si je supprime toutes les entrées, il réapparaît et c'est une validation de base que vous pourriez ajouter pour afficher un
petit message d'erreur ou un petit indice à votre utilisateur, pour vous assurer que les utilisateurs ont au moins une idée
du type d'entrée que vous souhaitez.
Maintenant, bien sûr, vous pouvez non seulement utiliser cette validité pour générer des messages d'erreur, mais aussi pour éviter que votre
formulaire ne soit soumis s'il n'est pas valide.
Donc, ici, dans le gestionnaire de soumission, où je soumets toujours mes données et crée ou met à jour un produit,
peu importe si la saisie est valide, nous pouvons utiliser les données
de validité que nous avons recueillies et par exemple vérifier si le titre est valide
et s'il ne l'est
pas. valide, d'où
le point d'exclamation, puis nous revenons simplement ce qui signifie que nous annulons l'exécution de
la fonction et que le code par
la suite ne s'exécutera pas. belle alerte native ici. Nous pouvons donc simplement afficher une alerte avec
un message de mauvaise entrée ou un titre de celui-ci et un message de s'il vous plaît vérifier les erreurs dans le formulaire et ensuite simplement ajouter un
bouton là où nous disons bien parce qu'il n'y a rien d'autre à faire ensuite pour confirmer, eh bien avec
cela, nous
avons un bon flux ici où nous avertissons l'utilisateur que l'entrée n'est pas valide.
Donc, par exemple maintenant, si j'essaie de soumettre cette entrée avec mon titre invalide, j'obtiens cette erreur et seulement si j'entre
un titre valide, je peux le soumettre parce que je n'ai pas encore ajouté de validation pour les autres entrées
que nous devrions bien sûr .
C'est donc à quel point vous pouvez commencer facilement avec la validation.
Maintenant que nous avons utilisé Javascript ici, vous pouvez bien sûr également apporter d'autres bibliothèques de validation tierces, comme par
exemple ValidateJS qui est un package que vous pouvez installer dans votre projet et commencer à l'utiliser pour ensuite valider facilement les chaînes
de certains modèles si vous le souhaitez pour faire ça. Dans ce module, j'écrirai les modèles
de
base que nous utilisons manuellement afin que vous compreniez clairement ce qui se
passe réellement là-bas, mais vous pouvez également apporter ces bibliothèques tierces.
Eh bien et maintenant avec cette compréhension de base de la validation et ainsi de
suite, assurons-nous que nous allons maintenant également vers une gestion des formulaires et des entrées plus évolutive et
n'impliquant pas des tonnes d'états que nous devons gérer manuellement.