1 00:00:02,380 --> 00:00:04,460 Agora, para validar o que o usuário 2 00:00:04,480 --> 00:00:07,680 digitou, é claro que quero fazer algo a cada pressionamento de tecla. 3 00:00:07,690 --> 00:00:11,740 Agora, já temos onChangeText aqui como ouvinte no título, por exemplo, e 4 00:00:11,740 --> 00:00:15,700 o que fazemos agora é definir o título em nosso estado. 5 00:00:15,790 --> 00:00:18,700 Agora, o próximo passo é não apenas 6 00:00:18,700 --> 00:00:25,270 fazer isso, para não apenas salvar a entrada, mas também validá-la e também gerenciar a validade dessa entrada 7 00:00:25,510 --> 00:00:26,780 em um estado. 8 00:00:26,860 --> 00:00:36,620 Portanto, adicionarei uma nova função aqui, manipulador de mudança de título, por exemplo, que obtém o texto digitado e, em seguida, pode fazer alguma coisa. Vou terceirizar 9 00:00:36,620 --> 00:00:41,870 isso em uma função nomeada separada para ter um pouco de limpeza e facilidade 10 00:00:41,870 --> 00:00:48,830 de seguir ao longo do código, porque agora ligarei este ouvinte aqui ao meu evento onChangeText, para que esta 11 00:00:48,830 --> 00:00:55,610 função seja acionada a cada pressionamento de tecla e, é claro, ainda definirei meu título com o texto, mas 12 00:00:55,610 --> 00:00:56,290 agora, 13 00:00:56,300 --> 00:01:00,220 além disso, como eu disse, também quero gerenciar a validade e, 14 00:01:00,230 --> 00:01:03,590 para isso, podemos adicionar outro estado que queremos gerenciar. 15 00:01:03,590 --> 00:01:10,580 Então, talvez aqui depois de gerenciar o valor do título, também possamos ter o título como estado válido ou o 16 00:01:10,580 --> 00:01:16,100 que você quiser chamá-lo e adicionar o título do conjunto é válido aqui como uma função 17 00:01:16,280 --> 00:01:18,780 setter e, em seguida, esse estado 18 00:01:18,800 --> 00:01:27,000 aqui inicialmente pode ser falso, para que inicialmente tratemos isso como inválido. Agora, para cada pressionamento de tecla aqui no manipulador de alteração de título, 19 00:01:27,630 --> 00:01:33,180 antes que possamos armazenar isso e atualizar nosso estado de título, podemos validar isso, é claro, e 20 00:01:33,210 --> 00:01:36,320 agora cabe a você decidir como deseja validar isso. 21 00:01:36,390 --> 00:01:45,130 Agora, por exemplo, você poderia dizer que isso só é válido se você tiver um texto que não esteja vazio, portanto, se o tamanho do texto 22 00:01:45,130 --> 00:01:47,990 for maior que zero. O texto é uma sequência, 23 00:01:48,000 --> 00:01:51,650 é claro, portanto, se o comprimento for zero, isso significa que é uma sequência vazia. 24 00:01:51,660 --> 00:01:58,920 Também podemos chamar texto. aparar para aparar o excesso de espaço em branco, para que apenas um monte de espaço em 25 00:01:58,920 --> 00:02:00,630 branco também não seja tratado como válido. 26 00:02:00,660 --> 00:02:05,760 Obviamente, você também pode adicionar a validação de comprimento mínimo ou máximo, verificando o tamanho aqui. Você 27 00:02:05,790 --> 00:02:10,420 pode adicionar validação de expressão regular para verificar o texto em relação a certos padrões. 28 00:02:10,440 --> 00:02:12,820 Na verdade, é algo que faremos 29 00:02:13,170 --> 00:02:15,620 mais tarde, mas, para começar, vou basta verificar 30 00:02:16,110 --> 00:02:19,490 assim e agora aqui, se somos maiores que zero, estamos bem, 31 00:02:19,500 --> 00:02:23,550 mas na verdade, se estamos tendo um comprimento de zero, não estamos bem. 32 00:02:23,550 --> 00:02:25,100 Então, aqui, eu quero 33 00:02:25,320 --> 00:02:30,870 que o título seja válido como falso, caso contrário, se o título for 34 00:02:30,880 --> 00:02:31,810 válido, 35 00:02:31,810 --> 00:02:34,810 é verdade, portanto, se tivermos uma entrada 36 00:02:34,810 --> 00:02:40,420 válida e sempre definiremos o próprio título, sempre precisaremos armazenar isso, nunca deve perder 37 00:02:40,420 --> 00:02:42,580 essa entrada do usuário, caso 38 00:02:42,580 --> 00:02:44,410 contrário, interromperemos o aplicativo. 39 00:02:44,410 --> 00:02:50,890 E agora com a validade do título armazenada no estado, podemos usá-lo, é claro, aqui em nosso código jsx 40 00:02:50,890 --> 00:02:56,980 para verificar se o título não é válido, por exemplo, e se for esse o caso, podemos gerar 41 00:02:56,980 --> 00:03:04,000 dinamicamente um texto aqui, onde, por exemplo, dizemos digite um título válido para mostrar aqui uma pequena mensagem de erro à 42 00:03:04,000 --> 00:03:06,670 qual você também pode atribuir algum estilo. 43 00:03:06,700 --> 00:03:11,530 Agora, com isso, você vê que, se formos para nossa entrada aqui, vemos que a mensagem de 44 00:03:11,560 --> 00:03:15,900 erro desde o início, porque começamos no estado inválido e se começamos a digitar, isso 45 00:03:15,910 --> 00:03:22,330 desaparece, mas se eu remover toda a entrada, ela reaparece e é alguma validação básica que você pode adicionar para mostrar uma pequena 46 00:03:22,390 --> 00:03:27,910 mensagem de erro ou uma pequena dica para o usuário, para garantir que eles tenham pelo menos uma idéia de 47 00:03:27,910 --> 00:03:29,790 qual tipo de entrada você deseja. 48 00:03:29,800 --> 00:03:36,700 Agora, é claro, você pode não apenas usar essa validade para gerar mensagens de erro, mas também para evitar 49 00:03:36,700 --> 00:03:39,780 que seu formulário seja enviado se for inválido. 50 00:03:39,820 --> 00:03:47,230 Portanto, aqui no manipulador de envio, onde sempre submeto meus dados e crio ou atualizo um produto, independentemente da entrada ser válida, podemos 51 00:03:47,230 --> 00:03:51,190 usar os dados de validade que reunimos e, por exemplo, verificar se 52 00:03:51,190 --> 00:03:56,530 o título é válido e se não é válido, daí o ponto de exclamação, retornamos, o que 53 00:03:56,550 --> 00:03:58,000 significa que cancelamos a execução 54 00:03:58,060 --> 00:03:59,500 da função e 55 00:03:59,500 --> 00:04:04,770 o código a partir de então não será executado e, além disso, talvez não desejemos apenas 56 00:04:04,850 --> 00:04:07,490 retornar, é claro que também podemos importar alertas 57 00:04:07,510 --> 00:04:13,630 do React Native e lançar um bom alerta nativo aqui. Então, podemos simplesmente mostrar alerta com uma 58 00:04:13,630 --> 00:04:24,520 mensagem de entrada incorreta ou um título e uma mensagem de, por favor, verifique os erros no formulário e, em seguida, basta adicionar um 59 00:04:25,090 --> 00:04:32,620 botão lá onde dizemos ok, porque não há mais nada a fazer para confirmar, bem com isso, 60 00:04:32,620 --> 00:04:33,870 temos um 61 00:04:34,180 --> 00:04:39,760 bom fluxo aqui, onde alertamos o usuário que a entrada é inválida. 62 00:04:39,760 --> 00:04:45,570 Então, por exemplo, agora, se eu tentar enviar essa entrada com meu título inválido, recebo esse erro e somente 63 00:04:45,580 --> 00:04:51,250 se eu inserir um título válido, posso enviá-lo porque ainda não adicionei a validação para as outras entradas, 64 00:04:51,250 --> 00:04:53,140 que é claro que deveríamos . 65 00:04:53,140 --> 00:04:56,410 Portanto, é assim que você pode começar a validação com facilidade. 66 00:04:56,440 --> 00:05:02,260 Agora que usamos o Javascript aqui, é claro que você também pode trazer outras bibliotecas de validação de terceiros, como, 67 00:05:02,950 --> 00:05:09,250 por exemplo, o ValidateJS, que é um pacote que você pode instalar no seu projeto e começar a usá-lo para validar facilmente 68 00:05:09,250 --> 00:05:15,310 as strings de certos padrões, se quiser fazer isso. Neste módulo, escreverei os padrões básicos 69 00:05:15,310 --> 00:05:15,900 que 70 00:05:15,910 --> 00:05:21,760 usamos manualmente, para que você tenha uma compreensão clara do que realmente está 71 00:05:21,790 --> 00:05:26,370 acontecendo lá, mas também pode trazer essas bibliotecas de terceiros. 72 00:05:26,380 --> 00:05:31,850 Bem, e agora com esse entendimento básico sobre validação e assim por diante, 73 00:05:31,990 --> 00:05:38,530 vamos garantir que também passemos a um gerenciamento de formulário e entrada mais escalável e que 74 00:05:38,620 --> 00:05:42,550 não envolva muitos estados que precisamos gerenciar manualmente.