Vix Blog
No Result
View All Result
  • Economia
  • Educação
  • Segurança
  • Mundo
  • Negócios
  • Notícias
  • Tecnologia
  • DMCA
NEWSLETTER
  • Economia
  • Educação
  • Segurança
  • Mundo
  • Negócios
  • Notícias
  • Tecnologia
  • DMCA
No Result
View All Result
Vix Blog
No Result
View All Result

Como validar formulários HTML usando expressões regulares

Carolina by Carolina
6 de julho de 2022
Reading Time: 8 mins read
0
Como validar formulários HTML usando expressões regulares

RELATED POSTS

O que são as tecnologias Adaptive Boost e Thermal Velocity Boost da Intel?

6 das coisas mais irritantes sobre Tesla EVs

As melhores teclas de teclado

Todo desenvolvedor web conhece a sensação: você criou um formulário e solta um gemido ao perceber que agora precisa validar cada campo.

Felizmente, a validação de formulários não precisa ser dolorosa. Você pode usar expressões regulares para lidar com muitas necessidades comuns de validação.

O que são expressões regulares?

Expressões regulares descrevem padrões que correspondem a combinações de caracteres em strings. Você pode usá-los para representar conceitos como “apenas números” ou “exatamente cinco letras maiúsculas”.

MAKEUSEO VÍDEO DO DIA

Expressões regulares (também chamadas de regex) são ferramentas poderosas. Eles têm muitos usos, incluindo pesquisa avançada, localizar e substituir e operações de validação em strings. Uma aplicação famosa de expressões regulares é o comando grep no Linux.

Por que usar expressões regulares para validação?

Há muitas maneiras de validar a entrada do formulário, mas as expressões regulares são simples, rápidas e convenientes de usar, se você entender como.

JavaScript tem suporte nativo para expressões regulares. Isso significa que usá-los para validação em vez de uma biblioteca externa ajuda a manter o tamanho do seu aplicativo da Web o menor possível.


As expressões regulares também são capazes de validar muitos tipos de entrada de formulário.

Noções básicas de expressões regulares

As expressões regulares consistem em símbolos que descrevem padrões formados por caracteres em uma string. Em JavaScript, você pode criar um literal de expressão regular escrevendo-o entre duas barras. A forma mais simples de uma expressão regular é assim:

/abc/

A expressão regular acima corresponderá a qualquer string que inclua os caracteres “a”, “b” e “c” nessa ordem, consecutivamente. A string “abc” corresponderá a essa expressão regular, bem como uma string como “abcdef”.

Você pode descrever padrões mais avançados usando caracteres especiais em suas expressões regulares. Caracteres especiais não representam um caractere literal, mas tornam sua regex mais expressiva.

Você pode usá-los para especificar que uma parte do padrão deve ser repetida um certo número de vezes ou para indicar que parte do padrão é opcional.

Um exemplo de um caractere especial é “*”. O caractere “*” modifica um único caractere ou um grupo de caracteres que vem antes dele. Ele declara que esses caracteres podem estar ausentes ou podem se repetir várias vezes seguidas. Por exemplo:

/abc*/

Corresponderá a “ab” seguido por qualquer número de caracteres “c”. A string “ab” é um exemplo válido desse padrão, pois o caractere “c” é opcional. As strings “abc” e “abccccc” são igualmente válidas, porque o “*” significa que “c” pode se repetir quantas vezes quiser.

A sintaxe regex completa usa vários outros caracteres padrão para descrever possíveis correspondências. Você pode aprender mais com o curso interativo Regex 101 da regexlearn.com. O guia JavaScript do MDN também é muito útil.


Validação de formulário com expressões regulares

Você pode usar regex para validar a entrada do formulário de duas maneiras. A primeira maneira é usar JavaScript. Envolve alguns passos:

  1. Obtenha o valor da entrada do formulário.
  2. Verifique se o valor da entrada corresponde à expressão regular.
  3. Caso contrário, exiba ao usuário do site que o valor do campo de entrada é inválido.

Aqui está um pequeno exemplo. Dado um campo de entrada como este:

<input placeholder="Input field">

Você pode escrever uma função para validá-la assim:

function validate() {
let value = document.querySelector("input").value;
const regEx = /^.{3,7}$/;
return regEx.test(value);
}

Outra maneira é aproveitar os recursos de validação de formulário HTML do navegador. Como? Especificando regex como o valor do atributo pattern da tag de entrada HTML.

O atributo pattern só é válido para os seguintes tipos de entrada: text, tel, email, url, password e search.

Aqui está um exemplo usando o atributo pattern:

<form>
<input placeholder="Input field" required pattern="/^.{3,7}$/">
<button>Submit</button>
</form>

Se você enviar o formulário e o valor da entrada não corresponder à regex inteira, o formulário exibirá um erro padrão semelhante a este:

um campo de entrada com um erro

Se a expressão regular fornecida ao atributo pattern for inválida, o navegador ignorará o atributo.

Padrões Regex Comuns para Validação de Formulários

Ter que construir e depurar regex do zero pode levar algum tempo. Aqui estão algumas instruções regex que você pode usar para validar alguns dos tipos mais comuns de dados de formulário.

Expressão regular para validar o comprimento da string

Um dos requisitos de validação mais comuns é uma restrição no comprimento de uma string. A expressão regular que corresponderá a uma string de sete caracteres é:

/^.{7}$/

O “.” é um espaço reservado que corresponde a qualquer caractere, e o “7” entre colchetes especifica o limite de comprimento da string. Se a string precisasse estar dentro de um certo intervalo de comprimento, como entre três e sete, a expressão regular ficaria assim:

/^.{3,7}$/

E se a string precisasse ter pelo menos três caracteres sem limite superior, ficaria assim:

/^.{3,}$/

É improvável que o comprimento seja o único requisito de validação para uma entrada de formulário. Mas você geralmente a usará como parte de uma expressão regular mais complicada, incluindo outras condições.

Expressão regular para validar campos somente com letras

Algumas entradas de formulário precisam conter nada além de letras para serem válidas. A seguinte expressão regular corresponderá apenas a essas strings:

/^[a-zA-Z]+$/

Essa expressão regular especifica um conjunto de caracteres composto por todo o alfabeto. O caractere especial “+” significa que o caractere anterior deve ocorrer pelo menos uma vez, sem limite superior.

Expressão regular para validar campos somente numéricos

A expressão regular a seguir corresponderá apenas a strings compostas inteiramente de dígitos:

/^\d+$/

A expressão regular acima é essencialmente a mesma que a anterior. A única diferença é que ele usa um caractere especial “\d” para representar o intervalo de dígitos, em vez de escrevê-los.

Expressão Regular para Validar Campos Alfanuméricos

As expressões regulares também facilitam a validação de campos alfanuméricos. Aqui está uma expressão regular que corresponderá apenas a strings compostas por letras e dígitos:

/^[a-zA-Z\d]+$/

Alguns campos são alfanuméricos, mas permitem alguns outros caracteres, como hífens e sublinhados. Um exemplo de tais campos é um nome de usuário. Abaixo está uma expressão regular que corresponde a uma string composta por letras, dígitos, sublinhados e hífens:

/^(\w|-)+$/

O caractere especial “\w” corresponde a uma classe inteira de caracteres, como “\d”. Ele representa o intervalo do alfabeto, dígitos e o caractere sublinhado (“_”).

Expressão regular para validar números de telefone

Um número de telefone pode ser um campo complicado para validar porque países diferentes usam formatos diferentes. Uma abordagem muito geral é garantir que a string contenha apenas dígitos e que seu comprimento esteja dentro de um determinado intervalo:

/^\d{9,15}$/

Uma abordagem mais sofisticada pode se parecer com esta retirada do MDN, que valida os números de telefone no formato ###-###-####:

/^(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}$/

Expressão Regular para Validar Datas

Assim como os números de telefone, as datas também podem ter vários formatos. As datas são geralmente menos complicadas de validar do que os números de telefone. Por quê? As datas não contêm caracteres além de dígitos e hífens.

Aqui está um exemplo que validará as datas do formato “DD-MM-AAAA”.

/^\d{2}-\d{2}-\d{4}$/

Validar com Regex é fácil

Expressões regulares descrevem padrões que correspondem a combinações de caracteres em strings. Eles têm uma variedade de aplicativos, como validar a entrada do usuário de formulários HTML.

Você pode usar regex para validar com JavaScript ou por meio do atributo de padrão HTML. É fácil construir expressões regulares para validar tipos comuns de entradas de formulário, como datas e nomes de usuário.

Carolina

Carolina

Related Posts

O que são E-Cores e P-Cores?
Entretenimento

O que são as tecnologias Adaptive Boost e Thermal Velocity Boost da Intel?

1 de fevereiro de 2023
6 das coisas mais irritantes sobre Tesla EVs
Entretenimento

6 das coisas mais irritantes sobre Tesla EVs

1 de fevereiro de 2023
As melhores teclas de teclado
Entretenimento

As melhores teclas de teclado

1 de fevereiro de 2023
Honor deve lançar dois novos aparelhos no MWC ’23
Entretenimento

Honor deve lançar dois novos aparelhos no MWC ’23

1 de fevereiro de 2023
Porquê reiniciar seu roteador da maneira correta
Entretenimento

Porquê reiniciar seu roteador da maneira correta

1 de fevereiro de 2023
Os 8 melhores sites para decrescer plug-ins e instrumentos VST gratuitos
Entretenimento

Os 8 melhores sites para decrescer plug-ins e instrumentos VST gratuitos

1 de fevereiro de 2023
Next Post
Como criar e usar Memoji no seu iPhone

Como criar e usar Memoji no seu iPhone

Como ver quais aplicativos estão conectados ao seu Google Drive

Como ver quais aplicativos estão conectados ao seu Google Drive

Deixe um comentário Cancelar resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

No Result
View All Result

Últimas Notícias

O que são E-Cores e P-Cores?

O que são as tecnologias Adaptive Boost e Thermal Velocity Boost da Intel?

1 de fevereiro de 2023
7 razões genuinamente boas para comprar um rastreador de fitness

7 razões genuinamente boas para comprar um rastreador de fitness

1 de fevereiro de 2023
6 das coisas mais irritantes sobre Tesla EVs

6 das coisas mais irritantes sobre Tesla EVs

1 de fevereiro de 2023
Entendendo a legado de padrão no Django

Porquê usar variáveis ​​CSS porquê um profissional

1 de fevereiro de 2023
Uma vez que acessar sistemas de arquivos remotos a partir do terminal Linux com Termscp

Porquê integrar o serviço de autenticação Auth0 com um aplicativo React

1 de fevereiro de 2023

Categorias

  • Entretenimento
  • Mundo
  • Notícias
  • Segurança
Vix Blog

Somos entusiastas da tecnologia com a missão de ensinar ao mundo como usar e compreender a tecnologia em suas vidas.
SAIBA MAIS »

Entre em contato conosco enviando um e-mail para contato@vixblog.com

Posts recentes

  • O que são as tecnologias Adaptive Boost e Thermal Velocity Boost da Intel?
  • 7 razões genuinamente boas para comprar um rastreador de fitness
  • 6 das coisas mais irritantes sobre Tesla EVs

Categorias

  • Entretenimento
  • Mundo
  • Notícias
  • Segurança

Links Importantes

  • Quem Somos
  • Blog
  • Fale Conosco
  • Política de Privacidade
  • DMCA

© 2021 VixBlog - Notícias e dicas para o seu dia dia.

No Result
View All Result
  • Economia
  • Educação
  • Segurança
  • Mundo
  • Negócios
  • Notícias
  • Tecnologia
  • DMCA

© 2021 VixBlog - Notícias e dicas para o seu dia dia.