Validação básica com Regex (Expressões Regulares)

Regex é uma linguagem formal que permite identificar padrões de caracteres dentro de um texto. E é muito utiliza em editores para encontrar e manipular pedaços de texto, nós podemos utilizar para identificar trechos específicos dentro de um xml, um csv, dados dentro de um formulário e qualquer fonte de texto.

Segue abaixo alguns exemplos da forma mais simples até um ponto mais recomendado, você pode testar usando o site rubular.com para acompanhar os exemplos:

Dígitos numéricos com Regex : Quando queremos nos referir a dígitos em um pattern, colocamos uma abreviação de dígito = \d

Por exemplo para exigir que um campo de CPF tenha 11 dígitos, colocaria:

 pattern="\d\d\d\d\d\d\d\d\d\d" 

Porém neste padrão acima, ficaria muito custoso manter pelo tanto de repetição e passível de falhas, então para facilitar, pode-se utilizar o recurso de repetição em regex, que é colocar entre chves o número de repetições desejadas ou limitada:

este mesmo padrão é equivalente ao de cima, muito mais simples de manter e entender.

 ​pattern="\d{11}" 

Para validarmos o caracter if no final do cpf podemos utilizar o operador ? que serve para dizer que pode ou não ter este caracter, ficando assim:

Aqui teremos três blocos de 3 dígitos, o hífen e o operador ? que indica que o hífen é opcional, pode ou não existir.

 pattern="\d{3}.\d{3}.\d{3}-?\d{2}" 

Dígitos literais e conjuntos com Regex :

Indica que podemos usar qualquer letra do alfabeto no intervalo de a até z.

Para letras do alfabeto neste intervalo:

 pattern="[a-z]"
pattern="[A-Z]" 

Para se utilizar o comum é [a-zA-Z] esse grupo ja indica de forma agrupada todas letras.

E para utilizar esse grupo de letras com números, basta colocar o indicador de dígitos que é o \d ficando:

 ​​pattern="[a-zA-Z\d]"
 

E para funcionar com qualquer palavra utilizamos o operador + que indica que uma ou mais letras deste mesmo grupo ficando.

 pattern="[a-zA-Z\d]+" 

exemplo simples de validação de email:

 pattern="[a-zA-Z\d][email protected][a-zA-Z\d]+\.[a-zA-Z\d]+\.[a-zA-Z\d]+" 

E para melhorar a forma de validação acima que está muito repetitiva.

Usamos o operador \w que é equivalente ao [a-zA-Z\d_] que representa uma “word”.

 pattern="\[email protected]\w+\.\w+\.?\w?\w?+" 

E para melhorar ainda podemos utilizar o caractere especial *, que é o equivalente ao caractere ? e o +. Utilizando o * o caractere antes dele pode ser presente ou não e pode aparecer mais de uma vez ou não também.

 pattern="\w*@\w*\.\w*\.\w*" 

Como tratar grupos em regex :

exemplo cartão de crédito: 9999-9999-9999-9999

Forma sem agrupamento

 pattern="\d{4}[ -]\d{4}[ -]\d{4}[ -]\d{4}" 

Neste grupo acima podemos notar que várias partes se repetem então podemos agrupar utilizar o () entre as partes identificadas exemplo:

\d{4} = indica teremos 4 dígitos iniciais

([ -]\d{4}) = indica que este grupo pode se repetir na expressão

{3} = e para finalizar nesse pattern, este indica que este grupo pode se repetir 3 vezes.

 pattern="\d{4}([ -]\d{4}){3}" 

Este post é apenas o básico desta linguagem formal, que seu uso cresce a cada dia dentre nós desenvolvedores.