Mascaras diversas com Jquery para seu formulário

Veja várias dicas de como validar seu formulário Web com mascaras diversas com JQuery e veja como usar toda o potencial do plugin JQuery-Mask.

[ad#texto]

Mascaras diversas com Jquery para seu formulário
Mascaras diversas com Jquery para seu formulário

Dias atrás estive pesquisando sobre formas de utilizar mascaras diversas com Jquery, foi então que notei que nem 10% do potencial do JQuery com o plugin JQuery-mask era utilizado, então resolvi listar alguns padrões de mascaras que encontrei:

$(document).ready(function(){
$('.date').mask('00/00/0000');
$('.time').mask('00:00:00');
$('.date_time').mask('00/00/0000 00:00:00');
$('.cep').mask('00000-000');
$('.phone').mask('0000-0000');
$('.phone_with_ddd').mask('(00) 0000-0000');
$('.phone_us').mask('(000) 000-0000');
$('.mixed').mask('AAA 000-S0S');
$('.cpf').mask('000.000.000-00', {reverse: true});
$('.money').mask('000.000.000.000.000,00', {reverse: true});
$('.money2').mask("#.##0,00", {reverse: true, maxlength: false});
$('.ip_address').mask('0ZZ.0ZZ.0ZZ.0ZZ', {translation: {'Z': {pattern: /[0-9]/, optional: true}}});
$('.ip_address').mask('099.099.099.099');
$('.percent').mask('##0,00%', {reverse: true});
$('.clear-if-not-match').mask("00/00/0000", {clearIfNotMatch: true});
$('.placeholder').mask("00/00/0000", {placeholder: "__/__/____"});
);

O exemplo acima são de mascaras diversas com Jquery simples, sem muita complicação e vão cobrir cerca de 80% das suas necessidades ao desenvolver formulários Web, mas uma dica interessante é que o plugin também permite a utilização de notação HTML, como no exemplo abaixo:

<input name="field-name" type="text" data-mask="00/00/0000" data-mask-reverse="true" />;

Lembram que eu falei que nem 10% do potencial do plugin JQuery-mask era utilizado? Então, existe formas mais complexas para necessidades mais específicas, uma delas é utilizar a máscara como uma função, veja o exemplo abaixo:

var celphoneMask = function(phone, e, currentField, options){
 
return phone.match(/^(\(?11\)? ?9(5[0-9]|6[0-9]|7[01234569]|8[0-9]|9[0-9])[0-9]{1})/g) ?
                   '(00) 00000-0000' : '(00) 0000-0000';
};
 
$(".sp_celphones").mask(celphoneMask);

Mas não paramos por aí, veja um outro exemplo que também será útil, a utilização de dígitos opcionais em uma máscara, muito útil para quem vai formatar campos com regra de máscara mas sem exigência mínima de tamanho:

// way 1
$('.ip_address').mask('099.099.099.099');
 
// way 2
$('.ip_address').mask('0ZZ.0ZZ.0ZZ.0ZZ', {translation:  {'Z': {pattern: /[0-9]/, optional: true}}});

Um detalhe para facilitar o entendimento destas mascaras diversas com JQuery é a legenda do padrão de dígitos:

  • 0: Only Numbers
  • 9: Only Numbers but optional
  • #: Only Numbers but recusive
  • A: Numbers and Letters
  • S: Only A-Z and a-z characters.

Mais modelos e exemplos podem ser retirados do post do Igor Escobar que trata especificamente sobre a JQuery.

Petter Rafael
Petter Rafael

Desenvolvedor Web atua com as tecnologias Java e PHP apoiadas pelos bancos de dados Oracle e MySQL. Além dos ambientes de desenvolvimento acima possuiu amplo conhecimento em servidores Apache/Tomcat, Photoshop, Arte & Foto, Flash e mais uma dezena de ferramentas e tecnologias emergentes. Atualmente colabora com o Viablog escrevendo sobre programação e tecnologia.

Assinar blog por e-mail

Digite seu endereço de e-mail para assinar este blog e receber notificações de novas publicações por e-mail.

Junte-se a 321 outros assinantes

Busca

outubro 2020
DSTQQSS
 123
45678910
11121314151617
18192021222324
25262728293031

Categorias