Como validar formulários HTML usando expressões regulares

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”.

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:

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.