Transcrições
1. Introdução do curso — Validação de formas: Bem-vindos, bem-vindos, bem-vindos a mais uma aula. Estou super entusiasmada. Meu nome é Clyde. Eu vou ser seu instrutor e isso faz parte de uma série inteira em torno de formulários. Percorremos um longo caminho, mas isso é super interessante porque vamos falar sobre a validação do lado
do cliente e apenas dar um passo atrás e pensar sobre por que a validação é importante. Se você não tem validação em um formulário, o que vai acontecer? Isso é certo. O usuário vai preencher um formulário. O usuário vai apertar o botão enviar, a filha do formulário vai para o servidor. E no servidor você vai ter alguma validação precisávamos de supor que a veia do servidor encontra um erro que vai ter que emitir uma resposta de volta para o navegador dizendo que o usuário não é era e todo o processo tem que se repetir. Isso é muito ineficiente. E é exatamente por isso que temos validação do lado do cliente. Mas o que você pode não saber é que existem dois tipos de validação do lado do cliente. Temos anulação do parafuso e por Bolton não significa apenas os dois pelo navegador. Por exemplo, uma entrada do tipo de e-mail tem certos hex e requisitos que precisam ser atendidos para o navegador permita que o usuário envie antes. Então isso é validação embutida. O segundo tipo de validação do lado do cliente é a validação do JavaScript. Sim, nós temos que codificar algum JavaScript, mas não se preocupe, eu vou te mostrar como fazer isso. E vamos usar a API de validação de restrição. Vai ser fascinante. Então esta aula realmente é para todos os níveis de vocês experimentados que você está apenas começando. Não se preocupe, é para você. Você será capaz de acompanhar e você vai aprender algo novo. Chega de gordura, gordura. Vamos entrar nisso. Vejo você na primeira palestra.
2. Dois tipos de validação do lado do cliente: Super, super excitante, não é? Porque agora vamos falar de forma, Fundação. E não vai ser tão complicado de uma seção. Quero dizer, você sabe muito disso já cobrimos muitas,
muitas incidências de nós realizando validação de front-end, mas eu só quero falar um pouco mais sobre isso com mais detalhes. Então, como você sabe, antes de enviar dados para o servidor, você deve garantir que todos os controles de formulário necessários ou full-out no formato correto. E isso é chamado o quê, 100 por cento. Isso é chamado de validação do lado do cliente. E a validação do lado do cliente ajuda a garantir que os dados enviados correspondam aos requisitos estabelecidos nos vários controles de formulário. E durante todo este curso, discutimos os conceitos básicos e usamos muitos exemplos de execução de validação de formulários do lado do cliente. Tínhamos atributos mesquinhez. Colocamos o atributo necessário em vários controles de formulário. Em alguns dos controles de formulário numérico tivemos os atributos Min, max attributes, et cetera, et cetera. Nós realmente fizemos muitos, muitos exemplos neste curso. Algo que você deve lembrar, no entanto, como um lado do cliente, validação é apenas uma verificação inicial e é um recurso importante para uma boa experiência do usuário. Por quê? Bem, pense nisso. Se você conseguir capturar dados inválidos no lado do cliente
, o usuário pode corrigi-lo imediatamente. O que quero dizer com isso é que se você não tem nenhuma validação do lado do cliente, o que vai acontecer? Isso é certo. A filha vai ficar pareceu para o servidor, então o servidor vai executar suas verificações e ele só vai Dane ser rejeitado, então ele tem que vir todo o caminho de volta através do fio para o cliente e só então o cliente pode corrigi-lo. Em outras palavras, você estaria causando atraso desnecessário por ter uma ida e volta para o servidor e, em seguida, de volta para o lado do cliente para dizer ao usuário para corrigir a filha. Portanto, a validação do lado do cliente é uma verificação inicial e melhora a experiência do usuário de que validação do lado do cliente muito confiante não deve ser considerada uma medida de segurança exaustiva. Seu aplicativo deve sempre executar verificações de segurança em qualquer formulário, alguns metadados no lado do servidor, bem como no lado do cliente. Porque a validação do lado do cliente é muito fácil de desativar, muito fácil de ignorar por hackers. Usuários mal-intencionados ainda podem ver facilmente os dados incorretos até seu servidor. Você sempre deve ter validação do lado do cliente, mas você não pode confiar exaustivamente nela. Isso faz sentido? Ok. Ok. Bem, a outra coisa que eu quero mencionar é que nós temos validação do lado do cliente, e eles são dois tipos diferentes de validação do lado do cliente. Quais são esses tipos diferentes? Bem, nós temos validação nativa, certo? Também conhecido como validação de formulário incorporada. E então nós também temos esse direito, validação JavaScript. Quais são as diferenças posterior validação é fornecida pelo navegador, que é fornecido pela especificação HTML. E a validação nativa não requer muito, se houver, JavaScript, porque você não está precisando escrever JavaScript ou código personalizado. validação de forma de parafuso geralmente tem melhor desempenho do que o JavaScript. Mas é claro, a desvantagem é que ele não é tão personalizável quanto JavaScript, o que me traz para a validação JavaScript. O que é isso? Isso é apenas validação que você tem que escrever em JavaScript. O principal benefício é que é completamente personalizável, mas é claro que você precisa criar tudo. Você precisa saber como escrever JavaScript ou usar uma biblioteca. Então lá vamos nós. Há apenas o resumo de alto nível da validação de formulários. E especificamente olhando para os dois tipos diferentes de validação do lado do cliente.
3. Validação incorporada: Bem-vindo de volta, bem-vindo de volta. Estou super, super animado, como você vai se lembrar na palestra anterior, discutimos que existem dois tipos de validação lado do cliente. Lembra-se do que eram? O primeiro foi built-in validação de formulário e o segundo tipo de validação
JavaScript vamos estar olhando para JavaScript em breve. Mas antes disso, eu só quero discutir a validação do parafuso em forma com um pouco mais de detalhes. Então vamos entrar nisso. Uma das características mais importantes ou mais significativas do HTML5 Form Controls é a capacidade de validar, usar uma filha sem depender de JavaScript. E como é que isto se faz? Bem, isso é feito usando atributos de validação em vários elementos de formulário. Vimos muitos exemplos disso no curso. Mas para recapitular, parte do atributo obrigatório especifica com um campo completo precisa ser preenchido antes que o formulário possa ser enviado para o servidor. Também temos a ligação MAN. E a próxima coisa, bastante intuitivamente dia especificar o comprimento mínimo e máximo de cadeias de dados textuais. Temos o Minimax. Sobre o que é isso? Fazendo? Intuitivamente, ele especifica os valores mínimo e máximo dos tipos de entrada numérica, como o tipo de número, por exemplo. E, em seguida, temos este tipo de atributo. Este tipo de atributo foi incrível, não foi? Porque isso especifica se a filha precisa ser um número, endereço de
e-mail ou algum outro tipo específico. E podemos ficar mais complexos com a validação integrada do lado do cliente. Podemos usar os atributos de patente. Você verá um exemplo em breve, mas isso especifica uma expressão regular que define um padrão. A inter filha precisa segui-lo. Um bom apenas alguns deles que nós olhamos. Nós olhamos para mais desses atributos são importantes porque se a filha inserida em um campo de formulário segue todas as regras especificadas por esses atributos vão ser considerados válidos e o navegador permitirá que o usuário envie o formulário para o servidor. É fazer santos. Então, quando um elemento é válido, as seguintes coisas vão acontecer. Em primeiro lugar, o elemento vai coincidir com a pseudo-classe CSAs veted, que permite aplicar um estilo específico a elementos válidos. Vimos muitos exemplos de nós usando isso no curso. E a segunda coisa que vai acontecer quando um elemento é válido é que o navegador irá enviar o formulário quando o usuário tentar enviar a filha. Claro, desde que nada os impeça de o fazer. Como quando você usou, por exemplo, quando um elemento é válido. Todos Clyde, o que acontece quando um elemento é inválido? E reparem no meu lado, óbvio, mas muito para recapitular. Vai solidificar tudo com aprendido. Da mesma forma que o estado válido, quando um elemento é inválido, duas coisas vão acontecer. Em primeiro lugar, o elemento vai coincidir com a pseudo-classe CSS inválida. E às vezes ele vai coincidir com outras pseudo-classes de interface também. Por exemplo, fora do alcance. E tudo isso depende do tipo de
IRA, a beleza de ter essa pseudo-classe inválida, é claro, é que você pode aplicar estilo específico, dois elementos que estão no alimentado em. A segunda coisa que vai acontecer é que, se o usuário tentar filmar, o navegador vai bloquear o envio do formulário e o navegador exibirá uma mensagem de erro nativa. Muito, muito útil. Antes de seguir em frente, eu só quero que você saiba que são várias eras que impedirão que o formulário seja enviado. E nós vamos estar olhando para alguns desses mais curtos, especialmente quando olhamos para o uso de JavaScript. Mas de qualquer maneira, colocamos diferentes tipos de ER é como uma entrada ruim para o valor de incompatibilidade de tipo curto, falta de intervalo de incompatibilidade íngreme, underflow, et cetera, et cetera. Há um monte de diferentes áreas associadas com diferentes tipos de entradas. E quando esses erros ocorrerem, o navegador não enviará o formulário ou não. Então é isso que acontece quando um elemento corresponde ao estado inválido. Mas um dos mais comuns. E já vimos isso nos cursos. O que? Isso mesmo, é o atributo obrigatório. E quando temos este atributo obrigatório no elemento de formulário, ele vai coincidir com a pseudo-classe necessária. O que isso significa? Bem, isso significa que o controle de formulário como um valor que está vazio e mensagem
interna vai ser exibido quando o usuário tenta enviar o formulário. E, claro, sabemos que a pseudo-classe inválida também vai coincidir. Já chega de falar, quero ir para o editor de texto. Vamos codificar uma entrada de táticas para o seu alvo. Eles exigiram pseudo-classe, o inválido e a pseudo-classe válida. Verá como é fácil. E podemos continuar com esta palestra. Então vamos rapidamente fazer isso agora.
4. O exemplo rápido — Curso de pseudoclasses válidas, inválidas e exigidas: Como sempre, vamos começar com um arquivo vazio. Vamos ter uma seção de cabeça na seção de estilo. Mas, por enquanto, vamos puxar a nossa forma muito rapidamente, certo? Então, dentro do corpo, vamos ter um formulário. Não precisamos de um atributo de ação. Ainda não estamos preocupados em enviá-lo para um servidor. Vamos ter um atributo label aqui. E basta dar-lhe um valor de atributo completo de escolha. Prefere uma banana ou um momento alegre? Não, eu sei que é aleatório. Só quero te dar um exemplo. E, em seguida, é claro que o para ter uma entrada com um atributo de tipo é definido como texto. Consegui. E então podemos dar a ele um atributo de nome de nossos iguais. E eu estou dando a ele um atributo de nome do nosso tipo, porque se não o fizermos, ele não será enviado para o servidor. Lembre-se, para que os dados sejam enviados ao servidor, precisamos de pares de valor de nome. Então o nome que estamos dando às cadeiras são como, Sabemos que o valor id tem que corresponder ao valor de quatro atributos de escolha. A última coisa que quero fazer é adicionar um botão do tipo enviado. Podemos apenas tê-lo, salvá-lo, atualizar o navegador. E lá vamos nós. Temos literalmente as nossas entradas. Como mencionei na palestra, um dos recursos de validação HTML5 mais simples são os atributos necessários. E para tornar uma entrada obrigatória, só
precisamos adicionar este atributo ao elemento, certo? Porque agora o usuário pode enviar este formulário. Eu gosto fica anexado ao URL, mas não há nenhum valor. Se quisermos torná-lo necessário, tudo o que temos a fazer é adicionar o atributo obrigatório a este elemento de entrada. É um atributo booleano. Não precisamos atribuir um valor a ele. Ou está lá ou não está. Agora, se o usuário tentar enviar, o navegador impedirá que o usuário faça isso. E o que é realmente legal é que quando este atributo é definido, o elemento vai coincidir com
a pseudo-classe UI necessária e coincidir com isso quer haja ou não um valor. E lembre-se do vinho formulário Enviar, ele vai exibir uma mensagem de erro quando o valor está faltando, quando o valor está vazio, e enquanto os valores vazios, a entrada também vai ser considerada inválida, correspondendo à pseudo-classe da interface do usuário inválida. Então agora, quando um usuário tenta enviar, observe como as crianças da caixa de entrada se concentram e recebemos essa mensagem de erro exibida para nós pelo navegador. Deixe-me provar que algumas dessas pseudoclasses estão funcionando. Em primeiro lugar, o que podemos fazer é que podemos direcionar o elemento de entrada onde seu estado é inválido. E isso deve ser muito simples aqui, dois pixels, borda vermelha sólida, e este é o ponto de partida padrão. O padrão quando temos um atributo obrigatório em um elemento é que ele vai coincidir com o estado inválido porque seu atributo de valor está vazio, certo? Mas uma vez que o usuário começa a digitar,
digamos que ele quer uma banana, ele não é mais vermelho. Também conhecido como não é inválido e o usuário cancela com o formulário. Mas é claro, uma vez enviado, ele volta para o estado inválido. Quais são outras coisas que posso te mostrar? Bem, por que não apontamos a entrada, certo? Nós, seu estado é inválido. Mas lembre-se, eu disse que também vai coincidir com o estado requerido. Então, como é que apontamos isto? E podemos dar a isso um estilo de imagem de fundo legal. Podemos dar-lhe um gradiente linear. Digamos apenas rosa e verde claro. Guarde isso. Então lá vamos nós. Sabemos agora que ele está correspondendo ao estado necessário e sua correspondência com o estado inválido ao mesmo tempo. Você pode ver como o rosa está fluindo de cima para baixo? Se você não quiser que, por exemplo, com este método de gradiente linear, podemos apenas dizer aqui para a direita. E claro que vai da esquerda para a direita. Agora o rosa começou o gradiente de elevação Julie transformando em verde da esquerda para a direita. E é só um pouco de informação. E então, finalmente, nós também podemos direcionar a entrada, mas desta vez quando seu estado é válido e lista apenas dar-lhe uma borda de dois pixels, verde sólido. Muito bem, guardamos isto quando o utilizador começar a escrever “Banana”. Podemos ver, ou você pode ver que há uma fronteira verde? Claro, é difícil de ver porque também temos um contorno, aquele contorno preto. Então, por que não removemos o contorno, definimos como nenhum. O usuário começa a digitar banana, e lá vamos nós. Sabemos agora que é válido. Tens de estar a gostar das coisas que são tão interessantes. E é tão divertido uma vez que ele clica, como se ele só se torna muito intuitivo, muito fácil começar a estilizar seus formulários de uma maneira muito, muito divertida. Bird de qualquer maneira, estes são os simples built-in validação pseudo-classes, mas eles são mais. E, em particular, este eu quero discutir com você agora. Então vamos voltar para a palestra.
5. O atributo de padrão: Você vai, eu disse que não era tão ruim, não é? Mas agora eu quero entrar em uma validação interna um pouco mais complexa. Eu quero agora olhar para os atributos theta1. E esse atributo padrão é outro recurso de validação muito útil. E o que espera? Isso mesmo, ele espera uma expressão regular como seu valor. O que é uma expressão regular? Expressões regulares ou regex, é apenas um padrão que pode ser usado para combinar combinações de caracteres em strings de texto. O que exatamente são plataformas? Bem, é um tópico muito complicado e está além do escopo deste curso para mim obtê-lo. Basta ter em mente que cada fornecedor de navegador tem seu próprio mecanismo regex, o pedaço de software de expressão wiggle que é capaz de processar expressões regulares. E tudo o que a expressão regular está tentando fazer
é tentar corresponder um padrão a uma determinada string. Então, Clyde, o que é esse motor de expressão regular? Bem, isso depende do navegador que você está usando. Então, quando estamos olhando para o
Chrome, o Chrome usa o mecanismo V8 quando executa JavaScript. E os desenvolvedores se esforçaram tanto nisso, eles meio que ignoraram construir seu próprio código personalizado para expressões regulares. Bem, isso foi até alguns anos atrás. Então agora o Google Chrome usa o próprio mecanismo regex chamado brincos. Outra coisa que eu quero mencionar a vocês é que nem todos os tipos de entrada com determinado padrão precisam ter os atributos de patente especificados. Por exemplo, vimos que o tipo de pesos de entrada está definido como e-mail. Nesse caso, não temos que escrever personalizado theta1 RegEx. Podemos, se quisermos, mas não precisamos. Por que não precisamos? Como o navegador não sabe Baja quando usamos entrada do tipo e-mail, navegador já usa um e-mail bem formado theta1. Enfim, eu só queria mencionar que antes de seguir em frente, vamos voltar ao assunto. Como eu mencionei, Rick x são bastante complexos, então não pretenda ensiná-los exaustivamente neste curso. Mas eu só quero dar alguns exemplos. Tenha uma carga para lhe dar uma idéia básica de como eles funcionam. Ok, então quais são alguns padrões que podemos especificar? Bem, sim, eu vou apenas três exemplos muito simples. Se tivermos apenas o caractere x, vamos combinar com um caractere. Isso é x não deve ser x, x, apenas x. Se especificarmos o padrão x, y, isso vai combinar x seguido por Y. E então, é claro, recuperar sua própria sintaxe. Podemos usar na linha para especificar tudo. Então podemos dizer x ou y. E isso vai coincidir com um caractere, que é x ou y. E eles são muitas, muitas mais possibilidades e exemplos que ainda estão cobertos, mas os acima são apenas alguns exemplos simples para você começou. E enquanto estamos neste tópico, por que voltamos ao exemplo que fizemos antes? E por que não colocamos seu próprio animal de estimação um atributo lá só para ver como ele funciona com nossas pseudo-classes inválidas e verificadas. Vamos dar uma olhada agora. Estamos de volta ao nosso exemplo original. E aqui estamos perguntando ao usuário se eles preferem uma banana ou um alegre. Então eu não quero que o usuário seja capaz de escrever nada e enviar isso agora. Eles podem submeter isso. Então, como podemos fazer isso? Bem, assim que você começar a pensar sobre um padrão, ding, ding, ding, ding, podemos pensar em expressões regulares. Então, aqui fomos para limitar a escrita do usuário. Cereja. Honra Orban, escritores são as únicas coisas que queremos que o usuário seja capaz de fazer. Então, por que não fazemos isso? E vamos nos livrar do gradiente. Só quero remover um pouco de barulho. Vamos apenas ter o inválido e uma pseudo-classe válida aqui. Como podemos fazer isso? Bem, em primeiro lugar, deixe-me fazer isso um pouco maior. A primeira coisa que podemos fazer, é claro, é adicionar esses atributos de patente à nossa entrada de texto tipo. É tudo um texto e sabemos que o valor deste atributo padrão é uma expressão regular. Para que pudéssemos fazer isto. Poderíamos dizer, bem, a expressão regular tem que ser banana, cereja. Poderíamos fazer isso saboreado, temos nosso navegador. Não podemos digitar aqui nada. E podemos ver que ele ainda tem o estilo inválido aplicado a ele, certo? Foi removido, o contorno. Guarde, comece a digitar grama. Ainda temos a aula inválida. Sim, é muito alegre. Ainda temos a perda inválida. Por que é isso? Oh, é porque sinto muito. Eu coloquei um espaço ainda. Vamos remover o espaço. Não queremos um espaço. Salve isso. Se escrevermos cereja, lá vamos nós. É verde. Se o usuário digitar banana, é verde e tem permissão para enviar. Mas há um problema com isso no sentido de que o usuário poderia fazer um B maiúsculo, mas não em que não vai funcionar. Então, que plataformas, você tem que ser muito explícito. E o que poderíamos definir aqui no início antes de apenas definir um pequeno b é um conjunto de caracteres e um estado de caracteres é apenas definido em RegEx com os colchetes. É basicamente uma alternativa, essa linha reta, tudo bem, então poderíamos dizer, bem quais personagens são permitidos, ou um pequeno B ou um grande B. E então, é claro, não queremos outro B. E então Podemos fazer o mesmo com o C. Então definimos um personagem. O usuário pode digitar um pequeno c para grande C. Agora, se salvarmos isso e o usuário digitar cereja com um C maiúsculo, ele vai ser válido. Quão incrível é isso? É fácil, certo? Este não é um código difícil. Acabamos de incluir o atributo da patente. Agora implementamos nossa própria validação interna do lado do cliente. Quem é divertido, não é? Tão bem feito? Diverti-me muito nesta palestra a olhar para o Bolt na validação. Lembre-se dos dois tipos de validação em parafuso e JavaScript? Analisamos o mais comum em ambos os tipos de anotação nesta palestra. Mas agora, o que começamos a saltar para um pouco de JavaScript um, trabalhos de validação fora do script. Vejo você na próxima palestra.
6. Validação em JavaScript: Estou entusiasmado com esta palestra porque nesta palestra vamos passar da validação integrada
HTML5 para validação JavaScript. E por validação de JavaScript, eu só quero dizer usar javascript para validar seu formulário. E deixe-me ser claro, você deve usar JavaScript se você quiser assumir o controle sobre a aparência de mensagens de erro
nativas ou para lidar com navegadores legados que não suportam validação de formulário incorporada do HTML. E se você não sabe o que é JavaScript ou como ele funciona, onde ele vem. Então, por favor, confira meus círculos avó completa JavaScript. Mas não se preocupe, vai ser bem simples nesta palestra. Então, mesmo que você não saiba como o JavaScript funciona, você deve ser capaz de acompanhar, ok? Certo, então como isso funciona? Bem, com formulários, é comum usar JavaScript com a API de validação de restrição. Mas não se preocupe, isso é fornecido para incomodar navegador. A maioria dos navegadores hoje oferece suporte à API de validação de restrições. Você pode vê-lo como um assento de métodos e propriedades que nos são fornecidos automaticamente pelo navegador. E há muitas APIs web diferentes disponíveis para nós pelo navegador, como a API Fetch quando estamos lidando com a idade. E quanto à API WebSockets? E o DOM? Portanto, esta API de validação de restrição é apenas uma das muitas, ou IPO. Como podemos usar essa API de validação de restrição? Será que limitado em seu uso em um elemento de formulário Dom interfaces. Então o que eu quero dizer com isso é que nós só podemos usar a API de restrição nas seguintes interfaces. E cada interface representa um elemento diferente. Por exemplo, a interface do elemento de botão HTML, é
claro, representa o elemento de patente e assim por diante e assim por diante. É bem intuitivo. Então, o que é realmente legal, meus queridos alunos é que quando estamos lidando com esses elementos, com o elemento de entrada, por exemplo, temos acesso à API de validação de restrição automaticamente. Não temos que fazer nada também. Certo, caso planador, então temos acesso à API de validação de restrições. Mas o que isso significa em um sentido prático? O que isso nos dá? Bem, isso nos dá certas propriedades e métodos automaticamente. Por exemplo, podemos acessar a propriedade mensagem de validação. O que faz isso? Bem, é uma propriedade somente leitura que retorna uma validade. Em outras palavras, ele vai retornar a mensagem de erro descrevendo as restrições de validação que o controle não satisfaz. Se o valor do elemento satisfaz todas as suas restrições, ok, é válido, então isso só vai retornar uma string vazia. Também temos esse objeto de validade. Este é realmente útil. E isso retorna um objeto de estado de validade que contém várias propriedades descrevendo o estado de validade do elemento real. Que tipo de propriedades podemos acessar, onde podemos acessar a propriedade de incompatibilidade padrão que retorna true se o valor não coincide com o atributo padrão especificado e ele vai corresponder false se ele não corresponder. E lembre-se de direitos como o valor não corresponde ao atributo padrão, também
vamos corresponder à pseudo-classe CSS inválida. Então, muitos destes vão estar trabalhando em conjunto. Então deixe-me dizer que novamente, esta incompatibilidade padrão retornará true se o valor não corresponder ao atributo padrão especificado, vamos obter essa era de incompatibilidade padrão e o formulário será impedido de ser enviado para o servidor. Mas, ao mesmo tempo, porque os padrões não estão sendo correspondidos, sabemos que a pseudo-classe CSS inválida também está em jogo. É bastante interessante. E outra propriedade deste objeto de validade é muito longo. Propriedade que retorna true se o valor for maior do que o comprimento máximo especificado pelo atributo comprimento máximo. Novamente, se for verdade, os elementos também vão coincidir com a pseudo-classe CSS inválida. Muito semelhante a muito curto. Isso vai retornar verdadeiro se o valor for menor do que o comprimento mínimo especificado
pelo atributo de comprimento masculino e estouro de intervalo, intervalo de dia underflow. Muito parecida. Eles vão retornar true se o valor for maior do que o valor máximo especificado pelo atributo max. Ou, claro, se estamos lidando com alcance e o fluido vai retornar verdadeiro se o valor for menor do que o mínimo especificado pelo atributo homens. Mas o que é interessante e como essas mensagens de erro de estouro de
intervalo e estouro de intervalo é que vamos ter algumas pseudo-classes que são correspondidas em você adivinhar quais usarão as pseudo-classes inválidas vai aplicar. Mas agora nós também temos o fora de alcance pseudo-classe que vai se aplicar. Bastante interessante, certo? Outra propriedade neste objeto de validade é essa propriedade de incompatibilidade de tipo ou mensagem de erro. Isso vai retornar true se o valor não estiver na sintaxe necessária. Por exemplo, se tivermos uma entrada com um atributo de tipo para sentar, para e-mail ou URL, e o usuário não digitar no formato correto se isso for válido, se ele retornar true, sabemos que a pseudo-classe CSS inválida também é vai se candidatar. E então temos essa propriedade válida que retorna true se o elemento
atende a todas as suas restrições de validação e, portanto, é considerado válido. Então, quando esses válidos é verdade, sabemos que as pseudo-classes CSS válidas. Nós vamos nos candidatar. E por último, mas não menos importante, o que acontece quando temos este atributo obrigatório em um elemento vai, nesse caso temos este valor faltando propriedade, e pescoço vai retornar verdadeiro se o elemento tem uma atributo que nenhum valor foi especificado. Crew, eu a conheço, eu sei que isso é uma tonelada, certo? É muito, muito útil. Mas você me conhece, as ações falam mais alto do que palavras. Então, por que não vou rapidamente para o console? Vejamos um exemplo rápido. Deixe-me acessar este objeto de estado de validade e mostrar suas propriedades. Esperemos que ele se torne mais intuitivo para você. Vamos dar uma olhada. Então aqui estamos um exemplo muito, muito simples. Acabei de embrulhar e inserir pesos, tipo de cidade toma uma forma. E, claro, temos um padrão de tipos de MET, que é o padrão, a propósito. Então nem precisamos disso. E, claro, agora, o usuário pode digitar qualquer coisa e enviar qualquer coisa. Não há restrições de validação. Mas eu quero mostrar a vocês como essa API de validação de restrição funciona. Lembre-se de que ele só se aplica a certas interfaces. E uma dessas interfaces e se aplica a era a interface de elemento de entrada HTML, que nos dá acesso a esta API no elemento de entrada diretamente. Então, como é que funciona? Lembre-se dos dois tipos de validação do lado do cliente. Tivemos a validação interna, que é apenas HTML5. Mas também temos o segundo tipo e que é usar JavaScript. E, a fim de usar JavaScript, precisamos escrever tudo o que script tags. Daqui. O que vamos fazer? Bem, precisamos pegar esse elemento de entrada. Não quero para acessar a API de validação de restrição. Então, como pegamos essa entrada? Vamos apenas defini-lo em uma variável, todos os textos. E vamos começar acessando nosso objeto de documento. Aqui, podemos obter elementos pelo nome da tag. O nome da etiqueta que queremos é importante, certo? E isso retorna uma coleção se você fez meu núcleo DOM. Então, acessamos o primeiro item na coleção, que é esse elemento de entrada em si. E o que é realmente legal. O que é realmente legal é que nós praticamente fizemos isso. Quer saber, em vez de chamar um texto, deixe-me chamá-lo de entrada de texto porque é isso que ele é. E o que podemos fazer agora é acessar essa API de validação de restrição diretamente. Não temos que fazer mais nada. Isso é muito, muito legal. Então podemos pegar nossa entrada de texto. E quais são algumas das propriedades de que falei? Bem, o que é muito importante para nós é que os objetos de validade são importantes para nós. E para ver isso, por que não registramos a tela no console? É tudo o que temos que fazer. Vá para a especificação do navegador, este documento. Vamos para a consola. E aqui está este estado de validade objetos. Quão incríveis são os alunos de Medea? Sim, direitos muito, muito legais. E estas são algumas
das propriedades de mensagens internas que são mostradas dentro deste objeto de estado de habilidade, certo? Eu falei sobre algumas dessas divergências de tipo
muito longas, muito curtas. It is valid propriedade é definida como true agora porque ele não tem os atributos necessários nele. Por que colocamos o atributo necessário nele? Vamos entrar em nossas entradas hospedado atributo obrigatório aqui. Agora temos esse objeto multi-estado novamente, mas agora é válido. A propriedade está definida como false. Não é mais verdade. E é claro que também temos este valor faltando propriedade. E lembre-se que retorna true se o elemento tem um atributo obrigatório que nenhum valor. É muito divertido, não é? E isto é tudo o que quero mostrar-te por enquanto. Eu só queria mostrar a vocês como realmente ver fisicamente essas valididades. Objetos, desenhe. Agora ainda estamos discutindo apenas as propriedades das restrições. Além disso, API é apenas mais um que eu quero mencionar para você e Lina quer passar para algum importante torná-lo. Então este salto de volta para a região.
7. Validação de JavaScript — objetos: Está bem. Eu disse que não é tão difícil, certo? E espero que esteja se tornando mais intuitivo. Vamos seguir em frente. Porque essas não são as únicas propriedades disponíveis para nós pela API de validação de restrição. Nós temos outros. Por exemplo, nós também temos isso, vamos validar corretamente. E isso irá validar propriedade é basicamente apenas nos dizendo se o elemento em causa, se o controle de formulário em causa será validado quando o formulário é enviado. Em outras palavras, é apenas uma propriedade que está nos dizendo se uma entrada pode ou não ser validada. É verdade se ele pode ser validado e falso se não for, Quando o fornecimento será uma vez que os validadores lã vai ser falso como se o elemento de entrada está desativado. Lembrem-se que olhamos para estes antes. Quando ele está desativado, ele não vai ser validado vento enviado para o servidor, faz sentido? Então, nós realmente analisamos em grande parte certas propriedades na API de validação de restrição. E quero seguir em frente agora. Eu quero olhar para não propriedades, mas eu quero olhar para alguns métodos disponíveis para nós. Métodos, a propósito, são como uma função. É algo que está feito. É uma palavra de fazer. É como um verbo, enquanto as propriedades são mais como um braço. Primeiro método que eu quero discutir é este método de validade frango retorna verdadeiro se o valor do elemento não tem problemas de validade. E é claro que vai voltar falso. Caso contrário, se o elemento for inválido, esse método também será acionado um evento inválido no próprio elemento. Também temos outros métodos. Nós também temos este método de validade personalizado sit. E o argumento que é preciso é apenas a mensagem. Ele permite que você especifique uma mensagem de erro personalizada para o elemento. Quão incrível é isso? E porque é tão incrível, eu quero discutir um pouco mais sobre por que discuti-lo mais? Como usar esse método, o sexto método de validade personalizada é um
dos casos de uso mais comuns da API de validação de restrição. Como eu mencionei, ele só permite que você use JavaScript para definir uma falha de validação e uma mensagem de erro personalizada. Porque vamos encarar isso, mensagens de erro
automatizadas do navegador têm suas desvantagens. Eles não são muito fáceis de entender. Às vezes, eles não lhe dão informações suficientes. É muito melhor nos sentarmos. E sim, você adivinhou. Vamos saltar sobre o editor de texto e vamos olhar para um exemplo de uso do método de validade personalizado SETT. Mal posso esperar para ver agora.
8. Método de setCustomValidity — exemplo: Tudo bem. Tudo bem. Tudo bem. Agora eu quero falar sobre este método de validade personalizado sit. É um método tão importante. Então eu quero olhar para alguns exemplos. E este foi o exemplo que olhamos anteriormente. Acabamos de ter um tipo de entrada de texto. Era tudo o que tínhamos. E o que nós acabamos de ver como esta validade personalizada sit funciona sobre isso. Então agora vamos remover necessário. Portanto, não há restrição ou validação interna. E agora o que eu quero fazer é acessar esse método. Então, acessamos nossa entrada de texto aqui. Podemos sair da API de validação de restrição diretamente. Não temos que fazer nada de especial. Mas desta vez eu quero acessar admitido. O método é chamado de validade personalizada sit. E eu quero que você perceba algo quando eu começar a fazer isso, certo, eu vou digitar nosso erro dizendo que esta é uma era que nunca pára. E se salvarmos isso e obtivemos nosso formulário, se agora o usuário tentar enviar, vamos receber um erro. Porque isso é basicamente dizendo ao navegador que isso leva campo de entrada está agora em estado de erro e net. Queremos mostrar uma mensagem de erro e, claro, ela nunca pára, certo? O usuário não é capaz de enviar este formulário. Portanto, este é um aspecto importante da utilização deste método. Quando você usá-lo, ele vai fazer esta entrada ou qualquer elemento que você está usando ou colocá-lo em, ele vai torná-lo inválido. E eu posso provar isso para você aqui dentro. Por que não fazemos o estilo da pseudo-classe inválida? Vamos pegar nossa entrada. Estilize o estado inválido e podemos apenas dar-lhe uma borda vermelha, borda, um pixel, vermelho sólido. E agora você pode ver que o estado padrão é inválido porque definimos essa mensagem de erro de validade personalizada, basicamente
informamos ao navegador que isso agora é inválido. Então o cliente, como fazemos para que não seja inválido? Will, se você colocar o valor para terminar string vazia, ele é válido novamente. Então, se agora acessarmos nossa variável de entrada de texto novamente, que é o próprio elemento de entrada, podemos acessar o método de validade personalizada cidade novamente, mas desta vez apenas defini-la para uma string vazia. Se fizermos isso, salve, agora
é válido. Não temos mais esse erro. O usuário não pode digitar e enviar. Ok, Clyde, eu entendo, eu entendo. Mas como nós realmente usamos isso em um sentido prático? Bem, por que olhamos para um exemplo agora, vamos mudar essa entrada do tipo, leva uma entrada do tipo de e-mail. E se há uma era no formato desse e-mail,
por que não mostramos nossa própria mensagem de erro personalizada? Como isso vai ser tão divertido. Cp pode dar uma chance. Então pausar o vídeo, ver se você pode dar uma chance, e então vamos cortá-lo juntos. Você deu uma chance? Espero que sim. Mas se não, não se preocupe, vamos fazer isso juntos agora. A primeira coisa que quero fazer é remover esta entrada de texto, ok? E queremos substituir essas entradas com entrada do tipo e-mail. É isso que queremos fazer. Podemos dar-lhe um nome de homem. Podemos identificá-lo de um homem. E porque estamos dando a ele uma identificação de macho enquanto e nós especificamos o rótulo aqui de macho. E podemos dizer,
por favor, me dê um endereço de e-mail válido, certo? Muito, muito simples. Então agora temos um e-mail, mas se o usuário tentar enviar apenas texto aleatório, recebemos essa mensagem de erro pelo navegador, mas talvez queiramos nossa própria mensagem de erro personalizada. Não gostamos do navegador. Como fazemos isso? Bem, vamos agora codificar alguns JavaScript. Não é mais uma entrada de texto é apenas a variável final como uma entrada de e-mail. Vamos apagar tudo o resto, remoção de ruído. Então aqui estamos nós. Temos nosso elemento de entrada de e-mail. O que podemos fazer agora é adicionar um ouvinte de eventos. Podemos pegar nossa entrada de e-mail. Existe o método add event listener. O evento que queremos ouvir é um evento de entrada. Então, toda vez que o usuário tipos de personagem, quando isso acontece, o que queremos fazer? Bem, queremos executar uma função de retorno de chamada. Desculpe, tenho muitos suportes. Precisam de um suporte aqui fora. Lá vamos nós. E o que queremos que aconteça em nossa função de retorno de chamada? Bem, queremos dizer se certo, nesta entrada de e-mail, a incompatibilidade de tipo é definida como true, então sabemos que há um problema, certo? Porque em segundo plano quando especificamos o tipo de e-mail, sabemos que há uma expressão regular construída pelo navegador neste caso. E sabemos que na rede não atender que o tipo de propriedade incompatibilidade. E lembre-se com suas propriedades localizadas, isso mesmo. Está localizado no objeto de estado de validade. Nunca dizemos a verdade. Sabemos que há um erro. E, portanto, queremos exibir nossa própria mensagem de erro personalizada. Se for falso, podemos apenas sentar esse método de validade personalizado para uma string vazia e, portanto, o navegador vai deixá-lo enviado para o servidor. Então, se nesta entrada de e-mail, acessamos seu objeto de estado de validade lá. Lembre-se que houve uma propriedade de incompatibilidade de tipo. Se a dívida é definida como verdadeira, então queremos o que eles rastreiam, queremos acessar esse método de validade personalizado sit. Não se preocupe. Vamos sair. Nós acessamos nossa entrada de e-mail. E aqui temos a validade do cliente do CID. E podemos apenas dizer, estou esperando um endereço de e-mail real, por favor. Certo, então lá vamos nós. Nós literalmente fizemos isso. E se você sabe JavaScript, uma vez que se MIT, nós também temos uma declaração else, certo, porque se a incompatibilidade de tipo de validade de e-mail é definida como false, então nós queremos que este outro seja executado. E o que queremos que aconteça aqui? Será, claro, queremos definir esta mensagem de validade personalizada conjunto para uma indústria. E foi por isso que te mostrei o exemplo anterior, certo? Onde tivemos que silício em corda para que fosse válido. Então, agora, se o usuário digitar texto aleatório, clicamos em Enviar, há nossa própria mensagem de erro personalizada. Que incrível. Mas, claro, se os tipos de usuário de endereço de e-mail válido e eu vou clicar em Enviar, estamos todos prontos para ir. Isso faz sentido? Eu não quero que você se perca em todos os detalhes. Tudo o que fizemos foi adicionar nosso próprio ouvinte de eventos naquela entrada de e-mail. O evento que estamos ouvindo é um evento de entrada cada vez que é acionado, nós executamos esta declaração se else, eu posso realmente provar a vocês o que está acontecendo. Talvez isso ajude se você não deixar claro. Mas o que podemos fazer é toda vez que esse evento de entrada é acionado, o que nós registramos no console? Esta validade de entrada de e-mail, objeto de estado. Tudo bem, vamos sair do console. Vamos para o navegador. Abra o console. Certo, vamos digitar a letra A.
Temos o estado de validade. Se abrirmos isso, temos essa propriedade de incompatibilidade de tipo. E uma incompatibilidade de tipo está atualmente definida como true. E é definido como verdadeiro porque nós demos este tipo de entrada de e-mail e porque é um tipo de e-mail, há um regex que tem que estar no formato adequado. tipo de Se abrirmos isso agora,
esse incompatibilidade é definido como false e porque é falso, queremos que o usuário seja capaz de enviar o formulário. Lá vamos nós. O usuário pode fazer, senhor, Que incrível. Espero que esteja fazendo sentido. Espero que tenha prestado atenção porque na próxima palestra, quero te dar um desafio e quero ver se você consegue descobrir como fazê-lo. Super-animado e te vejo na próxima palestra.
9. Introdução ao desafio — setCustomValidity: Bem-vindo a este desafio muito legal, onde eu quero que você tente e use esta API de validação de restrições ou pela ISAF. E eu vou ser honesto com você, eu não espero que você faça isso direito, mas apenas dê uma chance, tente e ir o mais longe que você pode ir. O que eu quero que você faça? Qual é o desafio? Bem, deixe-me dar um zoom levemente. Eu só quero criar um campo de entrada de texto com um usuário tem que digitar o nome de usuário, mas o nome de usuário tem que ter pelo menos uma letra minúscula e maiúscula. Se o usuário apenas tenta enviá-lo como está sem digitar nada, Eu quero uma mensagem de erro personalizada,
tolo, acredito que não está ligado a nada. Se o usuário começa a digitar apenas letras minúsculas e tenta enviar, recebemos outra mensagem de erro personalizada são incríveis. Mas é claro, quando o usuário agora tem uma letra maiúscula lá e clica em Enviar, o navegador nos permite passar por um exemplo muito simples. Você sabe o que? Deixa-me dar-te uma dica. E, em seguida, uma dica será a expressão regular que são usados, conhecido como o valor do atributo de patente. Deixa-me mostrar-te como é. Então, lá vai você. Eu quero que você use esse valor nos atributos de padrão. Deixa-me explicar-te rapidamente. Em primeiro lugar, temos os colchetes, os dois colchetes, que são dois conjuntos de grupos. Começamos cada grupo com um ponto de interrogação, sinal de igual. Isso é conhecido apenas e RegEx como um olhar positivo. Tudo o que estou tentando alcançar aqui, como estou tentando dizer, podemos digitar minúsculas e maiúsculas ou podemos digitar maiúsculas e minúsculas, a ordem não importa necessariamente. A próxima coisa que você vai notar é que temos essa parada completa. Parada total corresponde a qualquer caractere único. Então você coloca um asterix. Os asteriscos correspondem ao caractere anterior 0 ou mais vezes. E então temos os colchetes, que já vimos neste curso muitas vezes, com os personagens a2. Basicamente, ele é apenas permitindo uma gama de caracteres minúsculos entre a. e disse. Estou tentando dizer que no primeiro grupo é que o usuário pode digitar tantos caracteres como eles foram entre e z e agora terminar todo esse padrão. Por um quantificador. Eu tenho essas chaves, que basicamente diz ao RegEx para combinar com os grupos anteriores pelo menos uma vez e no máximo 50 vezes. Isso é tudo o que isso significa. Então esse é o meu RegEx que é aparente. Eu me sentia livre para copiar isso, colá-lo, e então tentar descobrir como eu fiz essa solução. Vou te dar uma dica sobre esse tipo de entrada. Eu vou estar ouvindo o evento inválido. Lembre-se que eu mencionei que esse tipo de propriedade incompatibilidade irá disparar um evento inválido quando o que está inter não corresponde ao campo padrão. Então é por isso que estou ouvindo um evento inválido. Quando um evento válido é acionado, é claro, eu quero verificar se o valor não é nada. Porque quando não é nada, Eu só quero que a mensagem de erro boba, mas você não digitou nada. Marimba, tente enviar agora, quero essa mensagem de erro. Então temos que verificar se o valor real é uma string vazia. Se não é uma string vazia, mas ainda estamos chegando lá então era válida. Sabemos então que não forneceram pelo menos uma letra maiúscula e uma letra minúscula. Por exemplo, sabemos que isso vai acontecer e precisamos dizer a eles que eles precisam de uma maiúscula e uma que tem muito para absorver, dar uma chance, ver até onde você pode ir, e eu vou vê-lo no vídeo da solução.
10. Solução de desafio — setCustomValidity: Você deu uma chance? Espero que sim. Espero que sim, mas não se preocupe, ele não conseguiu descobrir. É um pouco complicado e há uma nuance muito complicada quando se trabalha com a API de validação de restrição. Então eu vou mostrar a vocês como resolvemos isso. Antes de o fazermos, ele tem o nosso HTML. Temos uma etiqueta, que é só pedir o nome de usuário. E, claro, temos o nosso tipo de entrada de texto. Temos nosso atributo adquirido no dia. E eles são o padrão, o regex que falamos no vídeo de introdução. Muito, muito simples. E se formos para o navegador, isso é o que parece. Mas agora o usuário pode, obviamente os EUA serão impedidos de enviar o formulário. Temos uma mensagem de erro padrão que queremos
alterar e usar e apenas digitar qualquer coisa. Oh, claro que estima o cordame. Em minúsculas, maiúsculas, então o usuário pode enviar. Mas queremos nossas próprias mensagens de erro personalizadas. Como funciona? Bem, como você sabe, temos que embrulhar tudo em tags de script. A primeira coisa que queremos fazer é acessar essa API de validação de restrição. Para isso temos que trabalhar com alguma interface. O que vamos trabalhar aqui é este elemento de entrada. Então vamos pegá-lo. Vamos definir uma variável chamada entradas de nome. E podemos acessar nosso seletor de consulta de documentos, e queremos consultar selecionar nossos elementos de entrada. Isso realmente, realmente é assim tão simples. Esse é o primeiro passo concluído. Agora, o que eu quero fazer é acessar essa variável, conhecido como o elemento de entrada. E queremos adicionar nosso próprio ouvinte de eventos. E eu te dei uma pista para nove. Quero ouvir o inválido. E o evento inválido será acionado toda vez que
o valor da entrada não atender a esses direitos de patente. Além disso, vamos obter este evento inválido quando eles são necessários valor especificado. Mas é claro que não há nenhum valor associado a essa entrada. Então, quando este evento for disparado, o que queremos que aconteça? Bem, nós queremos executar, eu vou chamar de volta função. Vamos resolver a primeira questão. E a primeira questão é se nada for inserido na caixa de entrada, bem, nesse caso, sabemos que eu vou nomear entrada vai ter um valor. E esse valor vai ser uma string vazia, certo? Não vai ser nada. E se isso ocorrer, se isso for verdade, então queremos definir nossa própria mensagem de erro personalizada. Já sabemos como fazer isso. Podemos acessar todos os elementos. E agora estamos usando a API de validação de restrição, porque podemos acessar a mensagem de validade personalizada assento diretamente. Podemos dizer Bali idiota. Você não ensinou nada. Ratos e nós podemos salvar isso. Vamos para o navegador e provou a transmissão do navegador. E lá vamos nós, temos nossa própria mensagem de erro personalizada. Mas você notará se agora o usuário digitar caracteres e tentar enviar, continuamos recebendo essa mensagem de erro. Porque lembre-se que eu disse uma vez que usamos o método de validade personalizado sig, estamos dizendo ao navegador que esse elemento é inválido independentemente de ele realmente não é inválido mais. E essa é a leve nuance de que te falei mais cedo. Mas de qualquer forma, vamos resolver isso em breve. Lidamos com a primeira questão. Nós, obtemos um evento inválido e a entrada de nome não tem um valor. Então, já lidamos com esse cenário. Agora vamos lidar com o cenário dos Knicks. Então, quando chegamos a esse bloco mais, sabemos que a, temos um evento inválido, e B, sabemos que o usuário digitou alguns caracteres. Então, novamente, vamos definir nosso próprio método de validade do cliente assento de mensagem de erro personalizado. E aqui podemos dizer que os nomes de usuário precisam conter pelo
menos uma letra maiúscula e uma letra minúscula. Tente de novo. Então vamos salvar isso. Vamos ao navegador e testar isso podre. O usuário começa a digitar cliques, enviar, temos nosso próprio intermediário personalizado. Muito, muito legal. Mas você vai notar agora que temos um problema porque se o usuário digitar uma letra maiúscula, então temos uma maiúscula e minúscula. Se o usuário enviar, vamos estar neste estado perpétuo. Estamos sempre tendo uma era. Lembre-se, é porque usamos o método de validade personalizado SEC, que diz ao navegador que esta caixa de entrada sempre será inválida. Como paramos isso? Lembramos que temos que definir a falha de validade personalizada. Uma mensagem para uma string vazia, e quando é uma string vazia, ela será válida. Lembra-se disso? Mas não podemos ver. Você sabe, se olharmos para o nosso código, não
podemos definir a mensagem de validade personalizada para uma string vazia aqui porque isso é quando estamos lidando com uma era interna válida. Então, o que temos de fazer, e esta é a ligeira nuance, certo? Temos que acessar nossa entrada de nome, adicionar outro ouvinte de eventos. E este evento ouvintes só vai estar ouvindo a entrada, certo? Toda vez que um personagem é digitado, eu quero ouvir o currículo e queremos acessar nossa entrada de nome. E desta vez eu quero sentar na validade personalizada para uma string vazia. Tudo o que eu quero fazer e provar que isso funciona, vamos para o navegador. O usuário não digita nada. É uma mensagem de erro, começa a digitar. Vamos fazer uma cimeira maiúscula. Temos permissão para fazê-lo se o usuário apenas digitar minúsculas e clicar em Enviar, nós recebemos uma mensagem de erro personalizada. Mas repararam que há uma ideia problemática, estudantes? Você notou isso? Foi muito, muito leve, mas você pode ter pego e sabemos que o primeiro passo funciona. Então Lee acreditava que não digitou nada, mas se agora os tipos de usuário de personagem, um olhar para que estamos recebendo a mensagem de erro exibida pelo navegador. Não estamos recebendo nossa mensagem de erro personalizada. Na verdade, só vamos receber a mensagem do cliente quando o usuário clicar em Enviar. Porque somente quando os remetentes emitidos é essa mensagem de erro inválida emitida e somente então nossas mensagens de erro personalizadas se aplicam. Não queremos que isso aconteça. Então toda vez que um personagem é pressionado, certo? Em outras palavras, toda vez que um evento de entrada é acionado, queremos disparar outro método, nossa API de validação de restrição, onde você deseja executar o minuto de validade de pintinho, porque se isso for falso, o evento inválido será acionado e nosso código será executado. Então, se fizermos isso em cada iteração, isso deve resolver o nosso problema. Vamos atualizar o navegador. Ok, Nós podemos enviar boba acreditar não ligado a nada, mas se agora os tipos de usuário de personagem, um livro, quão incrível é que recebemos nossa própria mensagem de erro personalizado. E, claro, isso vai acontecer até que possamos clicar em Submeter novamente. Vai acontecer até termos um capital. Lá vamos nós. E se nos submetermos agora, podemos fazê-lo. O usuário pode apenas fazer um D maiúsculo Vamos apenas fazer maiúsculas. Não está funcionando, não está funcionando. Mas assim que o usuário, em seguida, vai para minúsculas, agora
podemos enviar. Eu sei, eu sei que isso pode ser bastante confuso, mas vamos pular para o código realmente é bastante intuitivo quando você entender o que está acontecendo. Se usarmos o método de validade personalizada SETT e escrevermos nossa própria mensagem personalizada, basicamente em um estado perpétuo de uma era, estamos dizendo ao navegador que a entrada é estado
inválido e nossa mensagem de erro personalizada deve ser mostrada. É por isso que não podíamos apenas confiar em nosso bloco de código aqui, ouvindo o evento inválido, tivemos que criar outro tipo de evento que
escutamos net é cada vez que os tipos de usuário de personagem. Vamos começar por aí. Sabemos que fazemos duas coisas quando esse evento de entrada é disparado. Deixe-me dizer de outra maneira. Toda vez que os tipos de usuário de personagem, fazemos duas coisas. Primeiro, começamos dizendo: “Ei, vamos procurar o valor dos métodos de validade personalizados para uma string vazia. Em outras palavras, vamos começar dizendo que estamos em um estado válido. Sei que parece estranho, mas ouça-me. A próxima coisa que fazemos é disparar esse método de validade de garota. E lembre-se na palestra que discutimos isso. Se tudo estiver bem nessa entrada, verdade é devolvida e nada mais acontece. Portanto, o navegador enviará o formulário. Mas se houver um erro, então sabemos que este método de validade de verificação vai disparar um evento válido. E nesse caso, nosso próximo bloco de código inteiro irá capturar todo o processo. E é por isso que ele mostra a mensagem de erro para o usuário tolo, acredito que não digitou nada quando é uma string vazia. Alternativamente, na instrução else, se o usuário tiver digitado caracteres, mas ainda estamos recebendo essa era inválida. Temos outra mensagem. Os nomes de usuário precisam conter pelo menos uma letra maiúscula e uma letra minúscula. Tente de novo, e então começamos de novo. Então, digamos que o usuário digita letras minúsculas e maiúsculas. Nesse caso, nós lidamos tipos de usuário que maiúsculas, este primeiro bloco de código vai se aplicar porque é um evento de entrada, você vai defini-lo como válido. E, em seguida, o método de validade de verificação vai retornar true. E é por isso que temos permissão para enviar o formulário. Eu sei que pode ser bastante complexo, mas realmente passar por isso novamente, passar por esta palestra algumas vezes, certifique-se de que você entende que realmente vai ajudá-lo a descer a pista. E uma vez que você obtê-lo em realmente, realmente não é verdade. De qualquer forma, espero que tenha se divertido muito nesta palestra. Eu sei que sim, mas vamos continuar. Vejo você na próxima palestra.
11. Curso de melhor uso: Esta foi uma aula divertida, não foi. Acabamos de aprender sobre validação do lado do cliente. Os dois tipos são validação interna e validação JavaScript. Usamos um método de validade personalizado sit para escrever nossas próprias mensagens de erro. Que divertido. E você pode começar a ver o quão importante é a validação, certo? E não é tão difícil de implementar. Nós só temos que pensar um pouco e você só tem que saber um pouco de HTML e JavaScript e talvez um pouco de RIG dói se você quiser cozinhar um pouco mais juntos. Mas de qualquer forma, percorremos um longo caminho. E lembre-se, eu continuo dizendo que validações do lado do cliente apenas uma peça para o quebra-cabeça. Você também precisa executar a validação do lado do servidor. E isso me leva a outro tópico inteiro. E é assim que se monta um servidor? Perseu forma filha. Então, na próxima aula, quero começar a falar sobre serviço, uma chamada. Espere, e espero vê-lo em breve. Adiós.
CM Code_Zone, !false | funny, because its true
