{"id":6606,"date":"2014-09-11T18:18:05","date_gmt":"2014-09-11T21:18:05","guid":{"rendered":"http:\/\/www.viamais.net\/blog\/?p=6606"},"modified":"2014-09-11T18:20:46","modified_gmt":"2014-09-11T21:20:46","slug":"mascaras-diversas-com-jquery-para-seu-formulario","status":"publish","type":"post","link":"https:\/\/www.viamais.net\/blog\/mascaras-diversas-com-jquery-para-seu-formulario\/","title":{"rendered":"Mascaras diversas com Jquery para seu formul\u00e1rio"},"content":{"rendered":"

Veja v\u00e1rias dicas de como validar seu formul\u00e1rio Web com mascaras diversas com JQuery e veja como usar toda o potencial do plugin JQuery-Mask.<\/em><\/h2>\n

[ad#texto]<\/p>\n

\"Mascaras<\/a>
Mascaras diversas com Jquery para seu formul\u00e1rio<\/figcaption><\/figure>\n

Dias atr\u00e1s estive pesquisando sobre formas de utilizar mascaras diversas com Jquery<\/a><\/strong>, foi ent\u00e3o que notei que nem 10% do potencial do JQuery<\/a> com o plugin JQuery-mask<\/a> era utilizado, ent\u00e3o resolvi listar alguns padr\u00f5es de mascaras que encontrei:<\/p>\n

$(document).ready(function(){\r\n$('.date').mask('00\/00\/0000');\r\n$('.time').mask('00:00:00');\r\n$('.date_time').mask('00\/00\/0000 00:00:00');\r\n$('.cep').mask('00000-000');\r\n$('.phone').mask('0000-0000');\r\n$('.phone_with_ddd').mask('(00) 0000-0000');\r\n$('.phone_us').mask('(000) 000-0000');\r\n$('.mixed').mask('AAA 000-S0S');\r\n$('.cpf').mask('000.000.000-00', {reverse: true});\r\n$('.money').mask('000.000.000.000.000,00', {reverse: true});\r\n$('.money2').mask(\"#.##0,00\", {reverse: true, maxlength: false});\r\n$('.ip_address').mask('0ZZ.0ZZ.0ZZ.0ZZ', {translation: {'Z': {pattern: \/[0-9]\/, optional: true}}});\r\n$('.ip_address').mask('099.099.099.099');\r\n$('.percent').mask('##0,00%', {reverse: true});\r\n$('.clear-if-not-match').mask(\"00\/00\/0000\", {clearIfNotMatch: true});\r\n$('.placeholder').mask(\"00\/00\/0000\", {placeholder: \"__\/__\/____\"});\r\n);\r\n<\/pre>\n
O exemplo acima s\u00e3o de mascaras diversas com Jquery<\/strong> simples, sem muita complica\u00e7\u00e3o e v\u00e3o cobrir cerca de 80% das suas necessidades ao desenvolver formul\u00e1rios Web<\/strong>, mas uma dica interessante \u00e9 que o plugin tamb\u00e9m permite a utiliza\u00e7\u00e3o de nota\u00e7\u00e3o HTML<\/a>, como no exemplo abaixo:<\/p>\n
;\r\n<\/pre>\n
Lembram que eu falei que nem 10% do potencial do plugin JQuery-mask era utilizado? Ent\u00e3o, existe formas mais complexas para necessidades mais espec\u00edficas, uma delas \u00e9 utilizar a m\u00e1scara como uma fun\u00e7\u00e3o, veja o exemplo abaixo:<\/p>\n
var celphoneMask = function(phone, e, currentField, options){\r\n\r\nreturn phone.match(\/^(\\(?11\\)? ?9(5[0-9]|6[0-9]|7[01234569]|8[0-9]|9[0-9])[0-9]{1})\/g) ?\r\n                   '(00) 00000-0000' : '(00) 0000-0000';\r\n};\r\n\r\n$(\".sp_celphones\").mask(celphoneMask);\r\n<\/pre>\n
Mas n\u00e3o paramos por a\u00ed, veja um outro exemplo que tamb\u00e9m ser\u00e1 \u00fatil, a utiliza\u00e7\u00e3o de d\u00edgitos opcionais em uma m\u00e1scara, muito \u00fatil para quem vai formatar campos<\/a> com regra de m\u00e1scara mas sem exig\u00eancia m\u00ednima de tamanho:<\/p>\n
\/\/ way 1\r\n$('.ip_address').mask('099.099.099.099');\r\n\r\n\/\/ way 2\r\n$('.ip_address').mask('0ZZ.0ZZ.0ZZ.0ZZ', {translation:\u00a0 {'Z': {pattern: \/[0-9]\/, optional: true}}});\r\n<\/pre>\n
Um detalhe para facilitar o entendimento destas mascaras diversas com JQuery<\/strong> \u00e9 a legenda do padr\u00e3o de d\u00edgitos:<\/p>\n