O que eu fiz de errado aqui?[Javascript Regex]

Question

Então, estou escrevendo um formulário de registro e preciso que o nome de exibição contenha apenas números, letras e sublinhados.

Dê uma olhada no meu código e me diga o que estou fazendo de errado.

<form method="post" action="/" onsubmit="return check_form()">
    <input type="text" id="display-name" name="display-name" maxlength="255" />
    <input type="submit" />
</form>
<script type="text/javascript">
<!--
    var name_regex = /^([a-zA-Z0-9_])+/

    function check_form()
    {
        if (!name_regex.test(document.forms[0].elements[0].value))
        {
            document.forms[0].elements[0].focus()
            alert("Your display name may only contain letters, numbers and underscores")
            return false
        }
    }
-->
</script>

Obviamente, foi reduzido para não incluir nada não relacionado ao problema, mas mesmo esse trecho não funciona.

Answer 1

Sua expressão regular

/^([a-zA-Z0-9_])+/

Procura

1. Início da string (check), seguido por
2. 1 ou mais letras, números ou sublinhado (marque)

E então o que quer que venha depois não importa.Este regex corresponderá a qualquer coisa, desde que comece com uma letra, número ou sublinhado

Se você colocar um $ no final, então funcionará - $ corresponde ao 'fim da string', então a única maneira de corresponder é se houver apenas números, letras e sublinhados entre o início e o fim da string.

/^([a-zA-Z0-9_])+$/

Em segundo lugar, sugiro usar document.getElementById('display-name').value em vez de document.forms já que não quebrará se você reorganizar o HTML e é mais 'o padrão comumente aceito do que fazer'

Answer 2

Meu regexp seguiria as linhas de: /^[a-zA-Z0-9_]+$/

editar:Eu acho que é a falta de um final de linha $ isso faz com que ele falhe.

Answer 3

O que significa “não funciona”?Ele rejeita nomes de exibição válidos?Aceita nomes de exibição inválidos?Quais?

Por @Annan, deixando de fora o $ faria o regexp aceitar nomes de exibição inválidos como abc123!@#.

Se o código estiver rejeitando nomes de exibição válidos, pode ser porque os parênteses estão sendo correspondidos literalmente em vez de denotar um grupo (não tenho certeza da convenção de aspas em JS).

Answer 4

Uma maneira mais simples de escrever ainda seria

var name_regex = /^([a-z0-9_])+$/i;

Answer 5

Ainda mais simples:

var name_regex = /^\w+$/;

Answer 6

Testei seu script e mexi no javascript.Isso parece funcionar:

<form method="post" action="/" onsubmit="return check_form()">
    <input type="text" id="display-name" name="display-name" maxlength="255" />
    <input type="submit" />
</form>
<script type="text/javascript">
    <!--
    var name_regex = /^([a-zA-Z0-9_])+$/;

    function check_form()
    {
        if (!name_regex.test(document.forms[0].elements[0].value))
        {
            document.forms[0].elements[0].focus();
            alert("Your display name may only contain letters, numbers and underscores");
            return false;
        }
    }
    -->
</script>

Answer 7

Desculpe pessoal, eu deveria ter sido mais específico.Sempre que adicionei espaços os valores ainda eram aceitos.O cifrão $ fez o truque!

Answer 8

Por 'não funcionar', presumo que você queira dizer que está permitindo a passagem de entradas inválidas (em vez de não permitir a passagem de entradas válidas).

Como @Annan disse, isso provavelmente seria devido à falta do $ caractere no final da expressão, pois atualmente requer apenas um único caractere válido no início do valor, e o restante pode ser qualquer coisa.