Validando inputs com Expressão Regular com jQuery

Talvez me odeiem por isso, talvez me crucifiquem.. sei lá..

Acabei de ver este artigo, pelo Twitter.

Okay, a idéia é bacana, porém existem falhas nesse código apresentado.

Expressões Regulares são bem úteis, e o método .replace() da linguagem javascript, é muito simples de usar.

Vamos… melhorar a proposta.

Afinal de contas, toda vez que critico algo, aparece alguém dizendo ‘então faça você’, lá vai:

Não sei se era a intenção do criador, porém o script aceita espaço, apesar dele não ter citado isso no comentário.

// Somente letras maiúsculas e minúsculas e numeros
  $("#campo4").keyup(function() {
    var valor = $("#campo4").val().replace(/[^a-zA-Z 0-9]+/g,'');
    $("#campo4").val(valor);
  });

Nesse outro, aceita vírgulas… achei estranho..

// Somente valores definidos
  $("#campo5").keyup(function() {
    var valor = $("#campo5").val().replace(/[^2,4,6,8]+/g,'');
    $("#campo5").val(valor);
  });

alguém fora eu, percebeu uma repetição de código ?

// Descrição
  $( blablabla ).keyup(function() {
    var valor = $( blablabla ).val().replace(ER,'');
    $( blablabla ).val(valor);
  });

certo ?

Primeiro passo para melhorar, tornando reaproveitável, é encapsular numa function, e usar a palavra chave this, afinal ir no DOM, selecionar 3 vezes o mesmo elemento, é lento.. já que o js nos oferece um ponteiro de graça e muito bom para isso.

Primeiro, corrigindo o problema de performance, e a expressão regular:

// Somente valores definidos
  $("#campo5").keyup(function() {
    var $this = $( this ); //armazeno o ponteiro em uma variavel
    var valor = $this.val().replace(/[^2468]+/g,'');
    $this.val( valor );
  });

veja que uso uma variavel criada por mim var $this, para representar o objeto atual, e assim não precisar ficar indo no dom e procurando, e nem ‘rechamando’ o seletor jQuery.

Isso aqui:

// Somente letras maiúsculas e minúsculas e numeros```

conseguimos mais facilmente com o modificador **\i**

``` js
/[^a-z0-9]+/gi

Okay, hora de dar ‘o meu toque’, no script:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
//inspirada na http://php.net/preg_replace
function er_replace( pattern, replacement, subject ){
  return subject.replace( pattern, replacement );
}
$(document).ready(function(){
  $("#campo1").keyup(function() {
    var $this = $( this );
    $this.val( er_replace( /[^0-9]+/g,'', $this.val() ) );
  });
  $("#campo2").keyup(function(){
    var $this = $( this );
    $this.val( er_replace( /[^a-z]+/g,'', $this.val() ) );
  });
  $("#campo3").keyup(function(){
    var $this = $( this );
    $this.val( er_replace( /[^a-z]+/gi,'', $this.val() ) );
  });
  $("#campo4").keyup(function(){
    var $this = $( this );
    $this.val( er_replace( /[^a-z0-9]+/gi,'', $this.val() ) );
  });
  $("#campo5").keyup(function() {
    var $this = $( this );
    $this.val( er_replace( /[^2468]+/g,'', $this.val() ) );
  });
});
</script>
<style type="text/css">
label { display: block; }
</style>

  <form action="" method="post">
    <label><input type="text" value="" id="campo1" />
    somente números</label>

    <label><input type="text" value="" id="campo2" />
    somente letras minúsculas</label>

    <label><input type="text" value="" id="campo3" />
    somente letras maiúsculas e minúsculas</label>

    <label><input type="text" value="" id="campo4" />
    somente letras maiúsculas e minúsculas e numeros</label>

    <label><input type="text" value="" id="campo5" />
    somente valores definidos (2,4,6,8)</label>
  </form>

hum… ainda estou incomodado.. que tal:

jQuery.fn.removeNot = function( settings ){
  var $this = jQuery( this );
  var defaults = {
    pattern: /[^0-9]/,
    replacement: ''
  }
  settings = jQuery.extend(defaults, settings);

  $this.keyup(function(){
    var new_value = $this.val().replace( settings.pattern, settings.replacement );
    $this.val( new_value );
  });
  return $this;
}
$(document).ready(function(){
  $("#campo1").removeNot({ pattern: /[^0-9]+/g });
  $("#campo2").removeNot({ pattern: /[^a-z]+/g });
  $("#campo3").removeNot({ pattern: /[^a-z]+/gi });
  $("#campo4").removeNot({ pattern: /[^a-z0-9]+/gi });
  $("#campo5").removeNot({ pattern: /[^2468]+/g });
});

Plugins são fantásticos ne?! lol