Utilizando mascara nos formulários de entrada

Gunnar CorreaGunnar Correa22/02/2015 às 02:52:25 - 12.548 acessos

Aprenda como colocar mascaras de validação em seus formulários.


A utilização das mascaras nos formulários, é um item muito importante para o desenvolvedor e também usuário final, pois ela possibilita diminuir as chances de erros ocorrerem por conta do usuário, como por exemplo, inserir um número de telefone inválido.

Acredito que você já passou pela seguinte situação, Esta em um site efetuando um cadastro e insere em um campo uma determinada informação e após clicar no botão de cadastrar o sistema valida e te retorna que os dados estão incorretos, além do erro, alguns campos não voltam preenchido.

O objetivo desta matéria, é apresentar uma biblioteca Javascript que permite adicionar mascaras em campos facilmente.

Mas o que são mascaras?

Mascaras nada mais é do que uma forma de formatar (organizar) as informações em um formulário em tempo real de preenchimento.

Primeiramente precisamos acessar o site http://plugins.jquery.com/mask/ e fazer Download do plugin e também do jQuery, feito isto, adicione o arquivo jquery.js e jquery.mask.min em uma pasta com o mesmo diretório, em seguida crie seu formulário HTML, adicionando o atributo id em todos os campos a serem formatados.

Inclua em seu arquivo .html os dois arquivos Javascript que você fez Download, como mostra o exemplo abaixo.

Código 1:

<!doctype html>
<html lang="pt-br">
	<head>
		<title></title>
		<meta charset="utf-8" />
		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
		 <script type="text/javascript" src="jquery.mask.min.js"></script>
	</head>
	<body>
		<form method="post" name="frmUsuario"> <br />
			Nome: <input type="text" name="txtNome" id="txtNome" /> <br />
			Telefone: <input type="text" name="txtTelefone" id="txtTelefone" /> <br />
			CEP: <input type="text" name="txtCep" id="txtCep" /> <br />
			Valor: <input type="text" name="txtValor" id="txtValor" />
		</form>
	</body>
</html>

Agora, precisamos apenas adicionar a mascara ao nosso sistema, para isto é muito fácil, basta fazer como mostrado a baixo.

Código 2:

<script type="text/javascript">
	$(document).ready(function(){
		$('#txtTelefone').mask('(00) 0000-0000'); //Telefone
		$('#txtCep').mask('00000-000'); //CEP
		$('#txtValor').mask('000.000.000.000.000,00', {reverse: true}); //Dinheiro
	});
 </script>

Pronto, feito isto seu documento já esta com a mascara adicionada e funcionando, no código abaixo é possível ver todo o código utilizado no nosso exemplo.

Código 3:

<!doctype html>
<html lang="pt-br">
	<head>
		<title></title>
		<meta charset="utf-8" />
		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
		 <script type="text/javascript" src="jquery.mask.min.js"></script>
		 <script type="text/javascript">
			$(document).ready(function(){
				 $('#txtTelefone').mask('(00) 0000-0000'); //Telefone
				 $('#txtCep').mask('00000-000'); //CEP
				 $('#txtValor').mask('000.000.000.000.000,00', {reverse: true}); //Dinheiro
			});
		 </script>
		 <style type="text/css">
			body{
				background-color:#eee;
				color:#111;
				font-family:verdana;
			}
			
			input{
				width:250px;
				height:30px;
				background-color:#FFF;
				font-family:courier;
				margin:5px;
				padding:5px;
				outline-color:red;
			}
		 </style>
	</head>
	<body>
		<form method="post" name="frmUsuario"> <br />
			Nome: <input type="text" name="txtNome" id="txtNome" /> <br />
			Telefone: <input type="text" name="txtTelefone" id="txtTelefone" /> <br />
			CEP: <input type="text" name="txtCep" id="txtCep" /> <br />
			Valor: <input type="text" name="txtValor" id="txtValor" />
		</form>
	</body>
</html>

Outros modelos:

Código 4:

$(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});
  $('.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: "__/__/____"});
  $('.fallback').mask("00r00r0000", {
      translation: {
        'r': {
          pattern: /[\/]/, 
          fallback: '/'
        }, 
        placeholder: "__/__/____"
      }
    });
);

No site http://igorescobar.github.io/jQuery-Mask-Plugin/ você pode visualizar toda a documentação sobre esta biblioteca.

Até a próxima!!! 


input mask jquery validação mascara usuário front-end form html javascript jclycle

Compartilhe


Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web (FIPP), Especialista em Tecnologias na Educação (Unoeste) e Pós-graduando em Segurança da Informação (Universidade Cruzeiro do Sul). Começou seus estudos na área de programação quando era criança, e atualmente está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.



Comentários

1 / 8