8

Preciso validar um campo de senha que deve conter ao menos um caractere especial. Há alguma expressão Regexp para fazer esta verificação?

E.g.

var patt = [a-z]; // verifica a existência de letras minúsculas 
var patt = [A-Z]; // verifica a existência de letras maiúsculas
var patt = [0-9]; // verifica a existência números
0

2 Respostas 2

11

O padrão \W selecionará todos os caracteres que não forem alfanuméricos, isto é, selecionará todos os caracteres exceto letras (A-Z), números (0-9) e underline (_).

Portanto, podemos montar um padrão. Assim:

const pass1 = 'senhafraca';
const pass2 = '$3nh@f0rt3';

const regex = /\W|_/;

console.log(regex.test(pass1));
console.log(regex.test(pass2));

No padrão /\W|_/, temos:

  • \W, que procura por caracteres não alfanuméricos;
  • |, que é o mesmo que um "ou", nas expressões regulares.
  • _, que procure todos os caracteres _, já que \W não seleciona caracteres underline.

Fiz um exemplo no RegExr.

1
  • Muito obrigado pela sua dica, Luiz.
    – LeMajstor
    Commented 11/11/2018 às 1:48
9

Apenas para complementar a outra resposta, gostaria de dar uma outra alternativa para a solução.

Você disse que quer validar um campo de senha e permitir que ele tenha caracteres especiais (além de letras e números, que eu entendi que também devem ser aceitos).

Ao usar \W, você realmente vai aceitar os tais caracteres especiais (tudo que não for alfanumérico), mas pode acabar aceitando coisas demais que talvez não devesse. Vamos entender melhor vendo em detalhes o que de fato significa o \W.


Basicamente, o \W é um atalho que significa "tudo que não for \w" (repare a diferença entre W maiúsculo e w minúsculo). E o \w significa "letras de A a Z (maiúsculas ou minúsculas) ou dígitos de 0 a 9 ou o caractere _".

Portanto, \W significa "tudo que não for letra de A a Z, dígito de 0 a 9 ou _". E esse é o problema, porque é tudo mesmo!

O \W pode até pegar os caracteres especiais (incluindo aqueles geralmente aceitos em senhas, como $ e @), mas também vai aceitar muitos outros que talvez não devessem ser aceitos em um campo de senha. Só para citar alguns exemplos:

* aceitar esses caracteres não seria um problema, coloquei uma observação no final

Para todos esses casos, a regex /\W|_/ retorna true, como podemos ver nos exemplos abaixo:

let regex = /\W|_/;

// espaço (https://www.fileformat.info/info/unicode/char/0020/index.htm)
let space = " ";
console.log("caractere: [" + space + "]");
console.log(regex.test(space)); // true

// TAB (https://www.fileformat.info/info/unicode/char/0009/index.htm)
let tab = "\t";
console.log("caractere: [" + tab + "]");
console.log(regex.test(tab)); // true

// \0 (https://www.fileformat.info/info/unicode/char/0000/index.htm)
let asciizero = "\u0000";
console.log("caractere: [" + asciizero + "]");
console.log(regex.test(asciizero)); // true

// caractere japonês (http://www.fileformat.info/info/unicode/char/337B/index.htm)
let jp = "\u337b";
console.log("caractere: [" + jp + "]");
console.log(regex.test(jp)); // true

// emoji (https://www.fileformat.info/info/unicode/char/1f4a9/index.htm)
let emoji = "\u{1F4A9}";
// se a linha acima não funcionar (browsers mais antigos), troque por "\uD83D\uDCA9"
console.log("caractere: [" + emoji + "]");
console.log(regex.test(emoji)); // true

// copyright (https://www.fileformat.info/info/unicode/char/00a9/index.htm)
let cr = "\u00a9";
console.log("caractere: [" + cr + "]");
console.log(regex.test(cr)); // true


// mais alguns exemplos
console.log(regex.test('^')); // true
console.log(regex.test('ñ')); // true
console.log(regex.test('௸')); // true

O caso do espaço e TAB pode acontecer se o usuário copiar e colar a senha de algum outro programa/editor e vier algum desses caracteres "escondido" na string. Isso vale também para uma série de outros caracteres que não são visíveis, mas podem estar na string sem sabermos. O Unicode define vários caracteres diferentes para espaço, por exemplo - e \W aceita todos eles (além de quebras de linha e outros caracteres de controle, e muitos outros).
Cabe a você decidir se vai querer aceitar uma senha como a$ 123.

Isso pode ser minimizado se você validar novamente a senha no servidor, antes de salvá-la no banco (mas se usar a mesma regex com apenas \W, não vai adiantar nada, pois também vai deixar passar esses caracteres).

Já os emojis, caracteres japoneses/árabes/etc e símbolos como o ©, bem, você decide se deve aceitá-los ou não. Se estes forem caracteres permitidos na sua senha, tudo bem. Mas se esses caracteres não devem ser aceitos, usar \W não é a melhor alternativa.

Não estou dizendo que a resposta que sugeriu \W está errada (inclusive votei nela, pois faz o que foi pedido). Ela de fato valida o que você precisa (caracteres especiais - tudo que não for letra ou número). O problema é quando ela começa a validar coisas que talvez não devesse.

Usar \W pode cair nesse caso: ela faz o que você quer (pega tudo que não é letra ou número), mas faz mais que isso: pega outros caracteres que talvez você não queira. Enfim, se para você tudo bem aceitar emojis, caracteres invisíveis, símbolos matemáticos, acentos e muitos outros caracteres definidos pelo Unicode, que não são letras de A a Z nem dígitos de 0 a 9, pode usar \W. Mas se você quer limitar os caracteres para somente aqueles que suas senhas podem ter, pode continuar a leitura, pois vamos usar uma regex um pouco mais complexa, porém menos propensa a esses falsos positivos.


Alternativa ao \W

Primeiro você deve definir quais caracteres especiais vão ser considerados, pois a definição "caracteres especiais" é um pouco vaga. Existem muitos caracteres que podem ser chamados de "especiais" (e se considerarmos "tudo que não for alfanumérico", já vimos que o resultado é abrangente demais).

Por exemplo, ^ (acento circunflexo, sem nenhuma letra) pode ser considerado? E se for uma letra com acento: ñ? O hífen? A vírgula? Parênteses? Sinais de pontuação? Cada site na internet tem suas próprias regras do que é permitido ou não em uma senha, então "caracteres especiais" é algo que varia bastante para este contexto. Por isso a primeira coisa a fazer é definir exatamente o que é um caractere especial no seu caso.

Uma vez definida a lista de caracteres especiais, uma solução é colocar todos esses caracteres entre colchetes. Os colchetes definem uma classe de caracteres e fazem a regex aceitar qualquer caractere dentro deles. Por exemplo, [@#] significa "o caractere @ ou o caractere #.

Então eu poderia ter algo como [@!#$%^&*()/\\], que corresponde a qualquer um dos caracteres entre [ e ]. Note que para o caractere \ eu tive que colocar \\, pois a \ sozinha serve para escapar caracteres que têm significado especial na regex. Se eu colocasse apenas um \, eu estaria escapando o ] e ele seria interpretado como o próprio caractere "fecha-colchetes" e não como o delimitador de uma classe de caracteres.

Um detalhe é que toda a expressão [@!#$%^&*()/\\] corresponde a apenas um caractere (que pode ser qualquer um que está dentro dos colchetes). Se eu usar esta regex, eu garanto que existe algum desses caracteres na string.

Esta lista é apenas um exemplo, você deve adicionar os caracteres que precisar nela. Vou usar a que eu defini acima, apenas para mostrar a ideia geral da regex, mas você deverá mudá-la para incluir todos os caracteres especiais que sua senha pode ter. Pode ser mais trabalhoso, mas pelo menos você garante que somente estes caracteres serão aceitos.

Lembrando que os caracteres que têm significado especial devem ser escapados com \. Por exemplo, se eu quiser que os colchetes sejam aceitos, tenho que fazer [\[\]] - o primeiro [ delimita a classe de caracteres, e em seguida \[ significa o próprio caractere [, \] significa o caractere ] e por fim ] fecha a classe de caracteres). Outra coisa é que dentro dos colchetes, nem todos precisam ser escapados (como o $, por exemplo) - uma maneira de testar é usar sites como o regex101 e escolher "javascript" no menu da esquerda, e ver se regex está correta.

Pelo que entendi, suas senhas devem ter letras maiúsculas, minúsculas e números, e deve ter obrigatoriamente um caractere especial. Uma maneira de verificar é usando lookaheads, cuja sintaxe é (?=expressão). No caso, queremos uma expressão que verifica se a string tem algum dos caracteres especiais, então bastaria usar ^(?=.*[@!#$%^&*()/\\]) - o marcador ^ significa "início da string", garantindo que vou verificar desde o início da senha. Em seguida, .* significa "zero ou mais ocorrências de qualquer caractere", e em seguida temos a lista de caracteres especiais que eu defini.

Ou seja, o trecho .*[@!#$%^&*()/\\] verifica se há algum caractere especial na string. Se não houver nenhum, a expressão falha e a regex não retorna nenhum match. Se houver algum, a regex continua avaliando a string.

O truque do lookahead ((?=...)) é que ele verifica a expressão dentro dele, e se ela encontrar algum match, ele volta para onde estava e continua avaliando o restante da regex. No caso, ele está logo depois do ^, então ele volta para o início da string.

Em seguida eu coloco tudo que a senha pode ter. Se ela pode ter os caracteres especiais, basta repeti-los. Se pode ter letras ou números, coloque tudo junto nos colchetes também: [@!#$%^&*()/\\a-zA-Z0-9]. Em seguida você pode colocar algum quantificador para definir o tamanho da senha.

Por exemplo, [@!#$%^&*()/\\a-zA-Z0-9]{8,20} faz com que a regex aceite somente strings de 8 a 20 caracteres (e estes podem ser qualquer um que está nos colchetes: um caractere especial, uma letra ou número). Se quiser limitar apenas o tamanho mínimo, use {8,} (mínimo 8, máximo indeterminado). Ajuste para os valores que precisar.

Depois você coloca o marcador $, que significa "final da string". Assim você garante que do início ao fim, a string só tem o que está especificado na regex.

Então o nosso exemplo ficaria:

let regex = /^(?=.*[@!#$%^&*()/\\])[@!#$%^&*()/\\a-zA-Z0-9]{8,20}$/;

// tem caracteres especiais
console.log(regex.test('a@4DFFd$fd')); // true

// tem caracteres especiais, mas tem menos de 8 caracteres
console.log(regex.test('a@4$f')); // false

// não tem caracteres especiais
console.log(regex.test('abcDE123456')); // false

Resumindo:

  • o lookahead garante que há pelo menos um caractere especial (usando a lista predefinida que você pode ajustar para incluir os caracteres que desejar). Se for encontrado, ele volta para o início da string e avalia o restante da regex
  • o restante garante que a string só terá os caracteres especiais, ou letras, ou números
  • os marcadores de início e fim da string garantem que a string só tem os caracteres especificados (se você não usá-los, a string poderá ter caracteres que não fazem parte da regex e mesmo assim test retornará true).

A regex também vai aceitar strings como $$$$$$$$$, então cabe a você verificar se isso é aceitável, ou se vai incluir mais verificações.


Se quiser ter mais condições, como por exemplo "deve ter pelo menos uma letra e um dígito", basta adicionar mais lookaheads:

let regex = /^(?=.*[@!#$%^&*()/\\])(?=.*[0-9])(?=.*[a-zA-Z])[@!#$%^&*()/\\a-zA-Z0-9]{8,20}$/;

// tem pelo menos um caractere especial, uma letra e um número 
console.log(regex.test('a@4DFFd$fd')); // true
console.log(regex.test('abc123$ABC')); // true

// tem menos de 8 caracteres
console.log(regex.test('a@4$A')); // false

// tem caracteres especiais, mas não tem número
console.log(regex.test('abcDE$#fadfda')); // false

Cada lookahead ((?=...)) garante que a string tem pelo menos um caractere especificado. O primeiro tem a lista de caracteres especiais, o segundo tem um dígito ([0-9]) e o terceiro tem uma letra ([a-zA-Z]). Com isso, garanto que a string tem pelo menos um caractere de cada um destes tipos. Se quiser forçar que tenha pelo menos uma letra maiúscula e uma minúscula, basta separar o [a-z] e [A-Z], fazendo um lookahead para cada.

E apenas para confirmar que esta regex não aceita emojis, caracteres japoneses, espaços, etc:

let regex = /^(?=.*[@!#$%^&*()/\\])(?=.*[0-9])(?=.*[a-zA-Z])[@!#$%^&*()/\\a-zA-Z0-9]{8,20}$/;

// concatenar as strings abaixo com esta, para ter pelo menos 8 caracteres
let s = "abc123$ABC";

// espaço (https://www.fileformat.info/info/unicode/char/0020/index.htm)
let space = " " + s;
console.log("senha: [" + space + "]");
console.log(regex.test(space)); // false

// TAB (https://www.fileformat.info/info/unicode/char/0009/index.htm)
let tab = "\t" + s;
console.log("senha: [" + tab + "]");
console.log(regex.test(tab)); // false

// caractere japonês (http://www.fileformat.info/info/unicode/char/337B/index.htm)
let jp = "\u337b" + s;
console.log("senha: [" + jp + "]");
console.log(regex.test(jp)); // false

// emoji (https://www.fileformat.info/info/unicode/char/1f4a9/index.htm)
let emoji = "\u{1F4A9}" + s;
// se a linha acima não funcionar (browsers mais antigos), troque por "\uD83D\uDCA9"
console.log("senha: [" + emoji + "]");
console.log(regex.test(emoji)); // false

// copyright (https://www.fileformat.info/info/unicode/char/00a9/index.htm)
let cr = "\u00a9" + s;
console.log("senha: [" + cr + "]");
console.log(regex.test(cr)); // false


Sobre emojis

Especificamente sobre os emojis, não há problema em aceitá-los na sua senha, desde que seu código lide corretamente com isso.

Há muitas aplicações que já aceitam emojis em senhas, e até mesmo estudos dizendo que isso as torna mais seguras e "divertidas". Claro que aí sua aplicação deve estar preparada para trabalhar corretamente com Unicode, coisa que o JavaScript não é. Basta ver os contadores de caracteres em campos de texto, por exemplo. Aqui mesmo no Stack Overflow, o campo de comentários considera que o emoji são 2 caracteres.

Antes de digitar o emoji:

Campo de comentários dizendo que faltam 585 caracteres

Depois de digitar o emoji:

Após digitar um emoji, agora faltam 583 caracteres. O emoji foi contado como 2 caracteres

Isso acontece basicamente por causa disso.

Mas felizmente eles são salvos e mostrados corretamente, então nesse caso específico, esse "problema" de tamanho é (na minha opinião) um problema menor. Isso é só para mostrar os problemas que você teria se usasse JavaScript para mostrar ao usuário que a senha não está com o tamanho aceito, por exemplo.

Se sua aplicação tem o mesmo problema (considera que codepoints acima de U+FFFF são 2 caracteres), verifique na documentação da sua linguagem como resolver.

De qualquer forma, este já é um assunto à parte (e você pode fazer outras perguntas sobre isso, se for o caso), mas é apenas para deixar claro que você pode sim usar emojis em senhas. O maior problema para senhas são os caracteres não imprimíveis e alguns outros detalhes que temos que levar em conta ao permitir qualquer caractere Unicode.

Para aceitar emojis (e não aceitar caracteres de controle, espaços, etc), a regex fica um pouco mais complicada, como você pode ver neste artigo e neste também. E vale notar também que nem todo emoji equivale a apenas um codepoint

7
  • 1
    Caramba, excelente resposta @hkotsubo! Sua resposta valeu muito mais do que as centenas de tutorias que achei na internet. Sou novo em JavaScript, por isso eu tinha essa dúvida quanto às regex, que é um tema considerado difícil até entre os programadores um pouco mais experientes nesta linguagem.
    – LeMajstor
    Commented 13/11/2018 às 11:41
  • 1
    @EdinaldoRibeiro Obrigado! Pois é, regex é um assunto sem fim, e muito mais complexo do que parece (quanto mais estudo, mais percebo que eu não sabia nada). Dois sites que eu acho muito bons são este e este, pois além de tutoriais, eles têm alguns casos práticos e explicam com detalhes como funciona, além de colocar diferenças entre as linguagens (pois é, não basta regex já ser difícil, ainda tem que saber como cada linguagem implementa)
    – hkotsubo
    Commented 13/11/2018 às 11:48
  • 1
    Cada lookahead verifica uma condição. O primeiro verifica se tem algum caractere especial em algum lugar da string. O segundo verifica se tem algum dígito, e o terceiro verifica se tem alguma letra. É uma forma de obrigar a string a ter pelo menos um caractere especial, uma letra e um número. Sem o segundo e terceiro lookahead, a string poderia ter somente caracteres especiais, por exemplo.
    – hkotsubo
    Commented 13/11/2018 às 11:50
  • 1
    O lookahead só verifica se existe algum caractere daquele tipo, e se encontrar, ele "pula" para o próximo trecho da regex (ele só serviu para verificar a existência daquele tipo de caractere, uma forma de obrigar a ter pelo menos um). A diferença é que [@!#$%^&*()/\\a-zA-Z0-9] não obriga nada (se tiver só letras ou só números, por exemplo, ela aceita). E além disso serve para eu colocar a quantidade {8,20} - eu não pus a quantidade no lookahead pq ele serve para verificar se existe pelo menos um. Embora pareça redundante, são propósitos diferentes
    – hkotsubo
    Commented 13/11/2018 às 12:06
  • 1
    Cara, estava com alguma dificuldade de entender o RegExp, mas depois dessa explicação, consegui resolver uma questão importante aqui. Abraço e continue assim ^^ Commented 30/05/2019 às 20:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .