Melhor forma de verificação alfanumérica em Javascript

Qual é a melhor maneira de realizar uma verificação alfanumérica em um INPUTcampo em JSP? Anexei meu código atual

<script type="text/javascript">
  function validateCode(){
      var TCode = document.getElementById('TCode').value;
      for(var i=0; i<TCode.length; i++)
      {
        var char1 = TCode.charAt(i);
        var cc = char1.charCodeAt(0);

        if((cc>47 && cc<58) || (cc>64 && cc<91) || (cc>96 && cc<123))
        {

        }
         else {
         alert('Input is not alphanumeric');
         return false;
         }
      }
     return true;     
   }

Você pode usar este regex /^[a-z0-9]+$/i

A inclinação original do autor da pergunta para usar str.charCodeAt(i)parece ser mais rápida do que a alternativa de expressão regular. Em meu teste no jsPerf, a opção RegExp é 66% mais lenta no Chrome 36 (e um pouco mais lenta no Firefox 31).

Esta é uma versão limpa do código de validação original que recebe uma string e retorna trueou false:

function isAlphaNumeric(str) {
  var code, i, len;

  for (i = 0, len = str.length; i < len; i++) {
    code = str.charCodeAt(i);
    if (!(code > 47 && code < 58) && // numeric (0-9)
        !(code > 64 && code < 91) && // upper alpha (A-Z)
        !(code > 96 && code < 123)) { // lower alpha (a-z)
      return false;
    }
  }
  return true;
};

Claro, pode haver outras considerações, como legibilidade. Uma expressão regular de uma linha é definitivamente mais bonita de se olhar. Mas se você está estritamente preocupado com a velocidade, pode considerar esta alternativa.

Verifique com um regex.

Javascript regexen não tem classes de caracteres POSIX, então você deve escrever intervalos de caracteres manualmente:

if (!input_string.match(/^[0-9a-z]+$/))
  show_error_or_something()

Aqui ^significa início da string e $significa fim da string e [0-9a-z]+significa um ou mais caracteres de 0a 9OU de aa z.

Mais informações sobre Javascript regexen aqui: https://developer.mozilla.org/en/JavaScript/Guide/Regular_Expressions

Você não precisa fazer isso um de cada vez. Basta fazer um teste para qualquer um que não seja alfanumérico. Se for encontrado, a validação falha.

function validateCode(){
    var TCode = document.getElementById('TCode').value;
    if( /[^a-zA-Z0-9]/.test( TCode ) ) {
       alert('Input is not alphanumeric');
       return false;
    }
    return true;     
 }

Se houver pelo menos uma correspondência de um não alfanumérico, isso acontecerá return false.

Eu criaria um método de protótipo String:

String.prototype.isAlphaNumeric = function() {
  var regExp = /^[A-Za-z0-9]+$/;
  return (this.match(regExp));
};

Então, o uso seria:

var TCode = document.getElementById('TCode').value;
return TCode.isAlphaNumeric()

    // On keypress event call the following method
    function AlphaNumCheck(e) {
        var charCode = (e.which) ? e.which : e.keyCode;
        if (charCode == 8) return true;

        var keynum;
        var keychar;
        var charcheck = /[a-zA-Z0-9]/;
        if (window.event) // IE
        {
            keynum = e.keyCode;
        }
        else {
            if (e.which) // Netscape/Firefox/Opera
            {
                keynum = e.which;
            }
            else return true;
        }

        keychar = String.fromCharCode(keynum);
        return charcheck.test(keychar);
    }

Além disso, este artigo também ajuda a entender a validação alfanumérica do JavaScript.

Com licença, sem polêmica. Mas para que a comunidade cresça como eu cresci nesses anos, é bom fazer algumas anotações.

A string alfanumérica real é semelhante "0a0a0a0b0c0d"e não semelhante "000000"ou "qwertyuio".

Todas as respostas que li aqui, retornaram trueem ambos os casos. E me perdoe, IMHO, isso não está certo .

Se eu quiser verificar se minha "00000"string é alphanum, minha resposta "humana" é inquestionavelmente FALSE.

Por quê? Simples. Não consigo encontrar nenhuma letra char. Portanto, é uma string numérica simples [0-9].

Por outro lado, se eu quisesse verificar minha "abcdefg"string, minha resposta "humana" seria até FALSA. Não vejo números, portanto não é alfanumérico. Apenas alfa [a-zA-Z].

A resposta de Michael Martin-Smucker foi esclarecedora.

No entanto, seu objetivo era alcançar um melhor desempenho em vez de regex. Isso é verdade, usando uma forma de baixo nível há um melhor desempenho. Mas os resultados são os mesmos. As strings "0123456789"(apenas numéricas), "qwertyuiop"(apenas alfa) e "0a1b2c3d4f4g"(alfanumérico) são retornadas TRUEcomo alfanuméricas. Da mesma /^[a-z0-9]+$/imaneira regex . A razão pela qual a regex não funciona é tão simples quanto óbvia. A sintaxe []indica ou , não e . Portanto, se for apenas numérico ou se for apenas letras, o regex retorna true.

Mas a resposta de Michael Martin-Smucker foi esclarecedora. Para mim. Isso me permitiu pensar em "baixo nível", para criar uma função real que processa inequivocamente uma string alfanumérica. Eu chamei de função relativa do PHP ctype_alnum( editar 2020-02-18: onde, entretanto, isso verifica OR e não AND ).

Aqui está o código:

function ctype_alnum(str) {
  var code, i, len;
    var isNumeric = false, isAlpha = false; //I assume that it is all non-alphanumeric



  for (i = 0, len = str.length; i < len; i++) {
    code = str.charCodeAt(i);


        switch (true){
            case code > 47 && code < 58: // check if 0-9
                isNumeric = true;
                break;
            case (code > 64 && code < 91) || (code > 96 && code < 123): //check if A-Z or a-z
                isAlpha = true;
                break;
            default: // not 0-9, not A-Z or a-z
                return false; //stop function with false result, no more checks

        }

  }

  return isNumeric && isAlpha; //return the loop results, if both are true, the string is certainly alphanumeric
};

... e aqui está o DEMO

Cheguei a esta discussão porque estava procurando uma alternativa em javascript para a função PHP. Não achei a resposta "pronto para ir", mas como costuma acontecer no Stackoverflow, o conceito de conhecimento e comparação entre si é algo sublime, que te leva a pensar na resposta de alguém e encontrar juntos a solução que você estava procurando, mas você acha que não sabia disso.

E compartilhe!

Melhor

Oscar

Em um ciclo restrito, provavelmente é melhor evitar regex e codificar seus caracteres:

const CHARS = new Set("0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ");
function isAlphanumeric(char) {
    return CHARS.has(char);
}

Para verificar se input_string é alfanumérico, basta usar:

input_string.match(/[^\w]|_/) == null