Usando expressões regulares no HTML5
Com a nova versão do HTML muitas funcionalidades estão disponíveis para realizarmos validações nos dados inseridos no formulário (antes de enviar para o servidor), isso é muito importante para evitarmos problemas com a segurança/confiabilidade da aplicação.
Segue alguns exemplos de validações:
<input type="text" id="country_code" name="country_code" pattern="[A-Za-z]" title="Three letter country code">. Um formulário HTML com um campo de entrada que pode conter apenas três letras (sem números ou caracteres especiais).
<input type="text" id="part" name="part" required pattern="[A-Z][0-9]" title="Part numbers consist of 3 uppercase letters followed by 4 digits."/>. O atributo pattern especificou uma expressão regular usada para validar um campo de entrada. Esse exemplo representa um campo de entrada de texto obrigatório para um número de peça. Para efeito desse exemplo, digamos que um número de peça seja formado por três letras maiúsculas seguidas de quatro dígitos. O uso de required e pattern garante que o campo tenha um valor e que o valor corresponda ao formato correto para um número de peça. Se o usuário passar o mouse no campo, a mensagem no atributo title é exibida.
<input type="text" placeholder="Ex: (99) 99999-9999" pattern="\([0-9]\)[\s][0-9]-[0-9]" maxlength="15" />. Exemplo validando o número de telefone, obrigando o usuário a digitar seguindo o formato igual ao exemplo no placeholder.
Usando essa abordagem é possível avaliar a maioria dos dados que o usuário preencher antes mesmo de enviar a requisição para o servidor.
Fontes:
- https://www.devmedia.com.br/exemplo/formulario-de-cadastro-com-atributos-do-html5/79?parte=13
- https://www.w3schools.com/tags/att_input_pattern.asp
Segue alguns exemplos de validações:
<input type="text" id="country_code" name="country_code" pattern="[A-Za-z]" title="Three letter country code">. Um formulário HTML com um campo de entrada que pode conter apenas três letras (sem números ou caracteres especiais).
<input type="text" id="part" name="part" required pattern="[A-Z][0-9]" title="Part numbers consist of 3 uppercase letters followed by 4 digits."/>. O atributo pattern especificou uma expressão regular usada para validar um campo de entrada. Esse exemplo representa um campo de entrada de texto obrigatório para um número de peça. Para efeito desse exemplo, digamos que um número de peça seja formado por três letras maiúsculas seguidas de quatro dígitos. O uso de required e pattern garante que o campo tenha um valor e que o valor corresponda ao formato correto para um número de peça. Se o usuário passar o mouse no campo, a mensagem no atributo title é exibida.
<input type="text" placeholder="Ex: (99) 99999-9999" pattern="\([0-9]\)[\s][0-9]-[0-9]" maxlength="15" />. Exemplo validando o número de telefone, obrigando o usuário a digitar seguindo o formato igual ao exemplo no placeholder.
Usando essa abordagem é possível avaliar a maioria dos dados que o usuário preencher antes mesmo de enviar a requisição para o servidor.
Fontes:
- https://www.devmedia.com.br/exemplo/formulario-de-cadastro-com-atributos-do-html5/79?parte=13
- https://www.w3schools.com/tags/att_input_pattern.asp
Samuel Pires
Curtidas 0