PI S7 DSW II DouglasARS
Apresentação
Olá Alunos,
Entramos pela sétima semana, vamos de leve essa semana, já que vocês tem bastante trabalho pela frente e vou aproveitar para mostrar ou relembrar, se for o caso, como utilizar máscaras para entrada de dados em campos de formulário. Também vamos apresentar uma técnica de validação das informações desses campos utilizando PHP. Fiquem atentos e façam uso do Fórum: Pergunte ao Professor no moodle.
Bons estudos a todos!
Prof. Douglas A.
Objetivo
- Máscaras para campos de formulário;
- Validação de campos.
Máscaras de Campos
Quando estamos desenvolvendo uma aplicação web que trabalha com formulários e banco de dados, surgirá uma necessidade: a chamada máscara dos campos. Isso ocorre quando queremos que usuário do sistema entre com uma informação com um formato pré-determinado de modo que seja necessário respeitar os padrões pré-determinados.
Antes disso, é necessário termos nosso banco devidamente modelado, pois assim o processo de recuperação das informações é menos trabalhoso, sem falar na questão de aparência na exibição dos dados.
Exemplo: utilizando máscara podemos definir que o campo telefone só poderá aceitar caracteres numéricos os caracteres ( ) -. Ficando assim: abre parênteses na 1ª posição, fecha parênteses na 4ª posição e o traço na 9ª posições. garantindo com isso, que todos os números de telefone serão no estilo (99)9999-9999.
Telefone é só um exemplo, podemos usar máscaras para CPF: 999999999-99 , CNPJ: 99.999.999/9999-99, datas: 99/99/9999, CEP: 99999-99, etc.
- Como utilizar máscaras?
Para facilitar esse processo um tanto complexo de construção de máscaras, utilizamos algo relativamente simples, o script jquery com o complemento jquery.maskedinput.
Para baixar os arquivos clique em: jquery.js e jquery.maskedinput.js.
O trecho do código abaixo exemplifica o uso da máscara em um arquivo de formulário. Coloquei até máscaras que ainda não utilizei para servirem de exemplo.
[...]
</head>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.maskedinput.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
$("input.data").mask("99/99/9999");
$("input.cpf").mask("999999999-99");
$("input.cep").mask("99999-999");
$("input.telefone").mask("(99)9999-9999");
});
</script>
<body>
[...]
Notem que os arquivos jquery.js e jquery.maskedinput.js estão dentro da pasta scripts que eu criei dentro da pasta padrão da aplicação. Portanto, vocês devem indicar o local para onde foram copiados os arquivos para que as máscaras funcionem corretamente.
- Como fica uso?
Para utilizar é simples. O trecho do código que mostra como chamar a máscara já criada para os campos de formulário pode ser visto em seguida.
[...] CEP:<input type="text" class="cep" name="cep" size="18" /> CPF:<input type="text" class="cpf" name="cpf" size="18" /> DATA:<input type="text" class="data" name="data" size="18" /> Telefone:<input type="text" class="telefone" name="telefone" size="18" /> Celular: <input type="text" class="telefone" name="celular" size="18" /></td></tr> [...]
Observem que aquele campo size tem haver com o tamanho da área da tela, e não tem nada haver com total de caracteres.
Validação de Campos
Existem algumas maneiras de se fazer a validação de campus de formulário. Mas antes de iniciarmos é importante saber qual a real necessidade de se verificar, antes ou depois, que os dados que estão sendo gravados correspondem ao esperado. A validação pode ser feita no banco, o que não é uma tarefa tão fácil, mostrando erros que pra maioria dos programadores seria incompreensível, ou utilizado a validação feita no lado da aplicação.
Existem técnicas utilizadas em sistemas que fazem a validação através de requisições (GET ou POST), dessa forma sempre que o usuário clicar em Salvar é feita uma requisição, processamento dos dados e então validado. Essas validações através de requisições (refresh nas páginas) são utilizadas para processamentos que precisam de validações complexas. Coisas simples como: verificar se o nome está vazio, se o email é válido ou se a senha é segura podem ser feita via JavaScript sem muito trabalho e ainda retornar a resposta ao usuário sem precisar dar um refresh na página, ou seja, em real-time.
Vídeos
Organização da Semana 7
Nesta sexta semana apresentamos [...] Um abraço,
Bom trabalho!
Prof. Douglas A.
Referências
[1] http://www.devmedia.com.br/validacao-de-dados-em-php-com-jquery-validate/28544#ixzz446zNC4me
[2] https://www.oficinadanet.com.br/post/12811-formulario-de-contato-em-php
| << | <> | >> |
|---|