Pagina inicial » Web design » Introdução à Validação de Restrição HTML5

    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 ,

    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.

    4. padronizar para validação Regex

    o padronizar atributo nos permitem use expressões regulares em nosso processo de validação de entrada. Uma expressão regular é um conjunto pré-definido de caracteres que formam um certo padrão. Podemos usá-lo para pesquisar sequências que seguem o padrão ou para impor um determinado formato definido pelo padrão.

    Com o padronizar atributo que podemos fazer o último - restringir os usuários a enviar sua entrada em um formato que corresponde à expressão regular dada.

    o padronizar atributo tem muitos casos de uso, mas pode ser especialmente útil quando queremos validar um campo de senha.

    O exemplo abaixo requer que os usuários insiram uma senha com no mínimo 8 caracteres e contém pelo menos uma letra e um número (fonte do regex que usei).

     

    Mais algumas coisas

    Neste artigo, vimos como fazer uso do validação de formulário fornecida pelo navegador fornecido pelo algoritmo de validação de restrição nativa do HTML5. Para criar nossos scripts de validação personalizados, precisamos usar a API de validação de restrições que pode ser a próxima etapa do refinamento das habilidades de validação de formulários..

    Os formulários em HTML5 são acessíveis por tecnologias assistivas, portanto, não precisamos necessariamente usar ária-obrigatório Atributo ARIA para marcar campos de entrada obrigatórios para leitores de tela. No entanto, ainda pode ser útil adicionar suporte de acessibilidade para navegadores mais antigos. Também é possível Desativar a validação de restrição adicionando o novalidate atributo booleano para o

    elemento.