Emascarar o validar campos con JQuery Mask
Enmascarar o validar campos en un sitio web es una tarea común, ya sea para delimitar la introducción de un número de teléfono, fecha o documento de identificación que tienen un formato y que tienen un formato fijo ahora es fácil con JQuery Mask.
No siempre debería confiarse la validación de campos del lado del cliente, lo mejor es tener una validación del lado del servidor.
Lo primero es descargar JQuery y JQuery Mask, agrégalos a tu proyecto y utiliza este código como ejemplo.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery mask - kiuvox</title> <script src="../jquery-1.11.2.min.js" type="text/javascript"></script> <script src="js/jquery.mask.min.js" type="text/javascript"></script> <script> $(document).ready(function(){ //FORMATO DE MASCARAS $('#text1').mask('SSSSS'); $('#text2').mask('00/00/0000'); $('#text3').mask('(000) 0000-0000', {placeholder: '(000) 0000-0000'}); //placeholder $('#text4').mask('-99999999999999999.00', { //opciones placeholder: '[-]000[.00]', translation: { '-': {pattern: /[-]/, optional: true} } }); }); </script> </head> <body> <h1>ENMASCARAR CAMPOS CON JQUERY MASK</h1> 5 letras <input type="text" id='text1' /><br/> fecha: 00/00/0000 <input type="text" id='text2' /><br/> telefono: (000) 0000-0000 <input type="text" id='text3' /><br/> cantidad: [-]000[.00] <input type="text" id='text4' /><br/> nota: [*] opcional </body> </html> |
Vas a tener muchas mas opciones de configuración en el sitio web de JQuery Mask Plugin.
DEMO
Entradas relacionadas
Sobre el Autor
hug0
Programador web, intento de runner, aficionado a Formula 1 y MotoGP. Habilidad especial: Comer 12 porciones de pizza con todo y orilla
2 comentarios
en el demo no funcionó