Professional Documents
Culture Documents
Objetivo: Desenvolver aplicaes web em HTML utilizando validao de formulrio em JavaScript Pr requisitos: Domnio das tcnicas de programao bsicas. Conhecimento dos componentes bsicos do HTML.
Com uma noo de onde pretendemos chegar vamos construir o nosso formulrio baseado na imagem acima: Exemplo:
O codigo HTML uma estrutura de tabela com um formulrio, tudo bem simples. Basta apenas prestar ateno para os nomes das caixas de entradas e dos botes radio bos para no ter problemas na hora da programao. No formulrio acima, o evento onSubmit chama uma funo chamada validaForm que ser responsvel pela validao dos dados do formulrio. Se os dados estiverem corretos retornar true e o formulrio ser enviado. Caso contrrio uma mensagem ser mostrada determinando o local do erro. Com o formulrio criado agora vamos partir para o desenvolvimento do cdigo. Neste formulrio ser feita a checagem de seis caixas de entrada de dados e de um radio box. Para validao das as caixas de entradas feita uma verificao se foi digitado algum valor. Para o campo e-mail a verificao mais elaborada para saber se um endereo de email vlido. Para o campo telefone, s so aceito nmeros. Para o campo Data de nascimento verificado se a data esta correta com o padro estabelecido. Para o campo Sexo verificao se algum valor foi selecionado. Exemplo:
Linha 1 Declarao da funo responsvel pela validao dos dados do formulrio. Linha 2 Declarao de uma varivel para economizar tempo e provveis erros de digitao. Linha 4 Verificao se foi digitado algum valor para o campo nome. Se retornar falso enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correo. Linha 10 Verificao se foi digitado algum valor para o campo user. Se retornar falso enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correo. Linha 16 Verificao se foi digitado algum valor para o campo senha. Se retornar falso enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correo. Linha 22 Verificao se foi digitado algum valor para o campo email. Se retornar falso enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correo. Linha 28 Declarao de uma varivel que armazenara a posio do caractere @ na caixa de entrada email. Linha 29 Declarao de uma varivel que armazenara a posio do caractere . na caixa de entrada email. Linha 30 Declarao de uma varivel que armazenara a quantidade de caracteres digitados na caixa de entrada email. Linha 31 Estrutura condicional para verificao se o caractere @ est no mnimo depois de trs letras, o caractere . est no mnimo depois de seis e se foi digitado no mnimo 9 letras. Se retornar falso, enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correo. Linha 37 - Verificao se foi digitado algum valor para o campo telefone. Se retornar falso enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correo. Linha 43 - Verificao se o valor digitado no campo telefone possui apenas nmeros. Se retornar falso enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correo. Linha 50 Declarao de uma varivel que armazena uma nova Data. Linha 51 - Declarao de uma varivel que armazena o valor do ano no formato completo com 4 caracteres. Linha 52 Declarao de uma varivel que separa o valor da caixa de entrada referente a data de nascimento e coloca em uma matriz, a / utilizada para separar os valores entre elas, suposto ter 3 valores referente a dia, ms e ano respectivamente. Linha 53 - Estrutura condicional para verificao se tem 3 valores para a matriz criada. Se retornar falso enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correo. Linha 54 - Declarao de uma varivel que recebe o primeiro valor da matriz, valor esse referente ao dia. Linha 55 - Declarao de uma varivel que recebe o segundo valor da matriz, valor esse referente ao ms. Linha 56 - Declarao de uma varivel que recebe o terceiro valor da matriz, valor esse referente ao ano completo com 4 caracteres. Linha 57 - Declarao de uma varivel que faz a verificao das variveis criadas anteriormente referente a dia, ms e ano, feita uma checagem se os valores so nmeros e se esto no padro estabelecido. Linha 58 - Estrutura condicional para checagem se o resultado da verificao dos dados digitados. Se retornar falso enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correo. Linha 69 - Verificao se foi selecionado algum valor referente ao sexo. Se retornar falso enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correo. Linha 73 Se todos os valores foram digitados corretamente a funo vai retornar true e o formulrio ser enviado. Sempre lembrando que essa validao boa, mas pode ser feito muito mais coisas para aprimorar, at mesmo trabalhar com programao orientada a objeto com o intuito de criar mtodos que faam a anlise dos dados.
Atividades
1. Com base na aula 09, foi criado um formulrio para cadastro de aluno, faa as validaes dos inputs em Javascript.