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
/[^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