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.