Introdução à Validação de Restrição HTML5

Sites e aplicativos interativos não podem ser imaginados sem formulários que nos permitam conectar-se com nossos usuários, e para obter os dados precisamos para garantir transações tranquilas com eles. Nós precisamos entrada de usuário válida, no entanto, precisamos adquiri-lo de uma forma que não frustra nossos usuários demais.

Embora possamos melhorar a usabilidade de nossos formulários com padrões de design UX inteligentemente escolhidos, o HTML5 também possui um mecanismo nativo de validação de restrição que nos permite pegar erros de entrada diretamente no front-end.

Neste post, vamos nos concentrar validação de restrição fornecida pelo navegador, e veja como os desenvolvedores frontend podem entrada segura do usuário válida usando HTML5.

Por que precisamos de validação de entrada de front-end?

Validação de entrada tem dois objetivos principais. O conteúdo que recebemos precisa ser:

1. Útil

Nós precisamos dados utilizáveis ​​podemos trabalhar com. Precisamos fazer as pessoas entrarem dados realistas no formato certo. Por exemplo, ninguém que esteja vivo hoje nasceu há 200 anos. Obter dados como esse pode parecer engraçado no começo, mas a longo prazo é irritante e preenche nosso banco de dados com dados inúteis..

2. Seguro

Quando se refere à segurança, isso significa que precisamos impedir a injeção de conteúdo malicioso - deliberadamente ou por acidente.

A utilidade (obtenção de dados razoáveis) pode ser alcançada apenas no lado do cliente, a equipe de back-end não pode ajudar muito com isso. Para atingir segurança, desenvolvedores front-end e backend precisam trabalhar juntos.

Se os desenvolvedores frontend validarem corretamente a entrada no lado do cliente, o equipe de back-end terá que lidar com muito menos vulnerabilidades. Hackear (um site) geralmente envolve enviando dados extras, ou dados no formato errado. Os desenvolvedores podem combater falhas de segurança como essas, lutar com sucesso no front-end.

Por exemplo, este guia de segurança do PHP recomenda verificar tudo o que pudermos no lado do cliente. Eles enfatizam a importância da validação de entrada de interface, fornecendo muitos exemplos, como:

"A validação de entrada funciona melhor com valores extremamente restritos, por exemplo, quando algo precisa ser um número inteiro ou uma cadeia alfanumérica ou um URL HTTP."

Na validação de entrada de frontend, nosso trabalho é impor restrições razoáveis na entrada do usuário. O recurso de validação de restrição do HTML5 nos fornece os meios para isso.

Validação de restrição de HTML5

Antes do HTML5, os desenvolvedores frontend estavam limitados a validando a entrada do usuário com JavaScript, que foi um processo tedioso e propenso a erros. Para melhorar a validação de formulários no lado do cliente, o HTML5 introduziu validação de restrição algoritmo que é executado em navegadores modernos e verifica a validade da entrada submetida.

Para fazer a avaliação, o algoritmo usa o atributos relacionados à validação de elementos de entrada, tal como , </code>, e <code><select></code>. Se você quiser saber como a validação de restrição acontece passo a passo no navegador, confira este documento WhatWG.</p> <p>Graças ao recurso de validação de restrição do HTML5, podemos executar todos <strong>tarefas de validação de entrada padrão</strong> no lado do cliente <strong>sem JavaScript, somente com HTML5</strong>.</p> <p>Para realizar tarefas relacionadas à validação mais complexas, o HTML5 nos fornece um <strong>API JavaScript de validação de restrição</strong> podemos usar para configurar nossos scripts de validação personalizados.</p> <h4>Valide com os tipos de entrada semântica</h4> <p>HTML5 introduziu <strong>tipos de entrada semântica</strong> que - além de indicar o significado do elemento para os agentes do usuário - também pode ser usado para <strong>validar entrada do usuário</strong> limitando os usuários a um determinado formato de entrada.</p> <p>Além dos tipos de entrada que já existiam antes do HTML5 (<code>texto</code>, <code>senha</code>, <code>enviar</code>, <code>restabelecer</code>, <code>rádio</code>, <code>caixa de seleção</code>, <code>botão</code>, <code>escondido</code>), também podemos usar o seguinte <strong>tipos de entrada HTML5 semânticos</strong>: <code>o email</code>,<code>tel</code>,<code>url</code>,<code>número</code>,<code>Tempo</code>,<code>encontro</code>,<code>data hora</code>,<code>datetime-local</code>, <code>mês</code>,<code>semana</code>, <code>alcance</code>, <code>procurar</code>,<code>cor</code>.</p> <p>Podemos usar com segurança tipos de entrada HTML5 com navegadores mais antigos, pois eles se comportarão como um <code><input type="text"></code> campo em navegadores que não os suportam.</p> <p>Vamos ver o que acontece quando o usuário digita o tipo de entrada incorreto. Digamos que criámos um campo de entrada de email com o seguinte código:</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="youremail">Seu email:</label> <input type="email" name="email"> <input type="submit" value="Submit"> </form> </pre> <p>Quando o usuário digita uma string que não usa um formato de email, o algoritmo de validação de restrição <strong>não envia o formulário</strong>, e <strong>retorna uma mensagem de erro</strong>:</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.jpg"></figure><p>A mesma regra se aplica a outros tipos de entrada, por exemplo, <code>type = "url"</code> os usuários podem enviar apenas uma entrada que segue o formato da URL (começa com um protocolo, como <code>http: //</code> ou <code>ftp: //</code>).</p> <p>Alguns tipos de entrada usam um design que <strong>nem permite que os usuários insiram um formato de entrada incorreto</strong>, por exemplo <code>cor</code> e <code>alcance</code>.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="bgcol">Cor de fundo:</label> <input type="color" name="color"> <input type="submit" value="Submit"> </form> </pre> <p>Se usarmos o <code>cor</code> tipo de entrada o usuário é obrigado a escolher uma cor do seletor de cores ou permanecer com o preto padrão. O campo de entrada é <strong>constrangido pelo design</strong>, portanto, não deixa muita chance de erro do usuário.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_2.jpg"></figure><p>Quando for apropriado, vale a pena considerar o uso do <code><select></code> Tag HTML que funciona de maneira semelhante a esses tipos de entrada restritos por design; ele permite que os usuários escolham em uma lista suspensa.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="favfruit">Seu fruto favorito:</label> <select name="fruit"> <option value="apple">maçã</option> <option value="pear">Pera</option> <option value="orange">laranja</option> <option value="raspberry">Framboesa</option> </select> <input type="submit" value="Submit"> </form> </pre> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_3.jpg"></figure><h4>Use os Atributos de Validação do HTML5</h4> <p>O uso de tipos de entrada semântica define algumas restrições sobre o que os usuários podem enviar, mas, em muitos casos, queremos ir um pouco mais longe. Isto é quando o <strong>atributos relacionados à validação</strong> do <code><input></code> tag pode nos ajudar.</p> <p>Atributos relacionados à validação pertencem a certos tipos de entrada (eles não podem ser usados ​​em <em>todos</em> tipos) em que eles impõem restrições adicionais.</p> <h5>1. <code>requeridos</code> para obter uma entrada válida por todos os meios</h5> <p>o <code>requeridos</code> atributo é o atributo de validação HTML mais conhecido. É um <strong>atributo booleano</strong> o que significa isso <strong>não leva nenhum valor</strong>, nós simplesmente temos que colocá-lo dentro do <code><input></code> tag se quisermos usá-lo:</p> <pre name="code"> <input type="email" name="email" required> </pre> <p>Se o usuário esquecer de inserir um valor em um campo de entrada obrigatório, o navegador <strong>retorna uma mensagem de erro</strong> que os avisa para preencher o campo, e eles <strong>não pode enviar o formulário</strong> até que tenham fornecido uma entrada válida. É por isso que é importante sempre <strong>marque visualmente</strong> campos obrigatórios para usuários.</p> <p>o <code>requeridos</code> atributo pode ser <strong>usado em conjunto com os seguintes tipos de entrada</strong>: <code>texto</code>, <code>procurar</code>, <code>url</code>, <code>tel</code>, <code>o email</code>, <code>senha</code>, <code>encontro</code>, <code>data hora</code>, <code>datetime-local</code>, <code>mês</code>, <code>semana</code>,<code>Tempo</code>, <code>número</code>, <code>caixa de seleção</code>, <code>rádio</code>, <code>Arquivo</code>, mais com o <code><textarea></code>e <code><select></code> Tags HTML.</p> <h5>2. <code>min</code>, <code>máximo</code> e <code>degrau</code> para validação de números</h5> <p>o <code>min</code>, <code>máximo</code> e <code>degrau</code> atributos nos permitem <strong>colocar restrições nos campos de entrada numérica</strong>. Eles podem ser usados ​​em conjunto com o <code>alcance</code>, <code>número</code>, <code>encontro</code>, <code>mês</code>, <code>semana</code>, <code>data hora</code>, <code>datetime-local</code>, e <code>Tempo</code> tipos de entrada.</p> <p>o <code>min</code> e <code>máximo</code> atributos fornecem uma ótima maneira de facilmente <strong>excluir dados não razoáveis</strong>. Por exemplo, o exemplo abaixo força os usuários a enviar uma idade entre 18 e 120.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourage">Sua idade:</label> <input type="number" name="age" min="18" max="120"> <input type="submit" value="Submit"> </form> </pre> <p>Quando o algoritmo de validação de restrição trava em uma entrada do usuário menor que a <code>min</code>, ou maior que o <code>máximo</code> valor, impede que ele atinja o backend e retorna uma mensagem de erro.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_4.jpg"></figure><p>o <code>degrau</code> atributo <strong>especifica um intervalo numérico</strong> entre os valores legais de um campo de entrada numérico. Por exemplo, se quisermos que os usuários escolham apenas nos anos bissextos, podemos adicionar <code>passo = "4"</code> atributo para o campo. No exemplo abaixo eu usei o <code>número</code> tipo de entrada, como não há <code>type = "year"</code> em HTML5.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourleapyear">Seu ano bissexto preferido:</label> <input type="number" name="leapyear" min="1972" max="2016" step="4"> <input type="submit" value="Submit"> </form> </pre> <p>Com as restrições predefinidas, os usuários só podem escolher entre anos bissextos, entre 1972 e 2016, se usarem a pequena seta para cima que vem com o <code>número</code> tipo de entrada. Eles também podem digitar um valor manualmente no campo de entrada, mas caso ele não atenda às restrições, o navegador retornará uma mensagem de erro.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.gif"></figure><h5>3. <code>comprimento máximo</code> para validação de tamanho de texto</h5> <p>o <code>comprimento máximo</code> atributo torna possível <strong>definir um comprimento máximo de caracteres</strong> para campos de entrada textuais. Pode ser usado em conjunto com o <code>texto</code>, <code>procurar</code>, <code>url</code>, <code>tel</code>, <code>o email</code> e <code>senha</code> tipos de entrada, e com o <code><textarea></code> Tag HTML.</p> <p>o <code>comprimento máximo</code> atributo pode ser uma excelente solução para campos de números de telefone que não podem ter mais de um certo número de caracteres, ou para formulários de contato onde não queremos que os usuários escrevam mais que um determinado tamanho.</p> <p>O snippet de código abaixo mostra um exemplo para o último, ele restringe as mensagens do usuário a 500 caracteres. </p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourmsg">Mensagem (max 500 caracteres):</label> <textarea name="msg" cols="25" rows="4" maxlength="500">

o comprimento máximo atributo não retorna uma mensagem de erro, mas o navegador simplesmente não permite que os usuários digitem mais do que o número de caractere especificado. É por isso que é crucial informar os usuários sobre a restrição, caso contrário, eles não vão entender por que eles não podem continuar com a digitação.

 
 * Sua senha: