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]

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.