O documento discute formulários em HTML e validação de dados com JavaScript. Aborda elementos como <form>, propriedades como action e method, e controles como input, select e textarea. Apresenta expressões regulares para validar campos como CPF, CEP, e-mail e senhas. Explica como recuperar dados, mascarar valores e localizar termos em strings usando expressões regulares.
2. Introdução
Peças de composição de uma página presentes
em praticamente todos os web sites;
Interface de coleta de dados, mesmo apenas
para busca;
São interativos;
O desenvolvedor não deve supor que o
usuário digitará apenas o que se espera.
2
3. Fundamentos
Primeiro fundamento do uso de JavaScript
com formulários: validar campos;
Mas ações não devem apenas no cliente, tem
que ser desenvolvida no lado do servidor;
O elemento <form></form> é o container de
todos os controles (campos) de um formulário.
3
4. Elemento form<form action="http://www.cpmart.eng.br" id="fdemo" method="get"></form>
O elemento form admite os atributos:
action: aponta para o endereço em que se encontra o programa destinado a
processar os dados enviados pelo formulário;
method: define o método de envio de dados para o servidor (get/post);
enctype: tipo de codificação dos dados enviados para o servidor;
accept-charset: lista de codificação de caracteres. Por default usa a mesma
codificação do documento;
accept: especifica uma lista de tipos de conteúdo para os dados a serem aceitos e
processados no servidor;
name: nome para o formulário. Esse atributo está em desuso e, em seu lugar,
deve ser usado o atributo id.
4
5. Outros atributos do form
id
class
lang
style
title
target
onsubmit
onreset
onclick
ondblclick
onmousedown
onmouseup
onmouseover
onmousemov
e
onmouseout
onkeypress
onkeydown
onkeyup
5
17. Validação:
Verifica número Inteiro
17
<script type="text/javascript">
var expressao = /^d+$/;
function verificarInteiro( val ){
if( expressao.test( val ) ){
alert( "OK" );
}
else{
if( val != null && val != "" ){
alert( "Não é um inteiro válido");
}
}
}
</script>
<form id="frmInteiro" action="#"
onsubmit="verificarInteiro(this.txtInteiro.value); return false;">
<label for="txtInteiro">Valor:</label>
<input type="text" size="10" id="txtInteiro" name="txtInteiro">
<input type="submit" value="Validar">
</form>
• Em JavaScript, uma expressão regular é delimitada
por uma barra / inicial e outra final.
• Cada expressão de validação sempre começa com ^
(início de linha) e termina com $ (fim de linha), para
garantir que abrange o conteúdo inteiro do texto
(parâmetro) a ser validado.
• Existe uma seqüência de expressão regular que
significa um dígito (0 a 9): d.
•Adicionando um + após essa seqüência, significa
"uma ou mais ocorrências da seqüência precedente".
Isto é, um ou mais dígitos. Note que isso implica o
preenchimento obrigatório.
•Assim, temos a expressão regular completa para
validar um número apenas composto por dígitos.
18. localizar um determinado termo
em uma frase
<script type="text/javascript">
var texto = "Expressões regulares em Javascript
para iniciantes!";
var RegExp = /Javascript/;
if (texto.search(RegExp) != -1) {
console.log("Encontrado na posição: "+
texto.search(RegExp));
} else {
console.log("Não encontrado!");
}
</script>
18
//Verificar se no texto recebido existe a expressão: java script:
19. Localizar um email em uma string
<script type="text/javascript">
var texto = "O meu e-mail é:
cpmart@gmail.com";
var RegExp = /b[w]+@[w]+.[w]+/;
if (texto.search(RegExp) != -1) {
console.log("E-mail localizado na
posição: " + texto.search(RegExp));
} else {
console.log("E-mail não encontrado!");
}
</script>
19
20. Validando e-mails
//Procura por uma palavra que contenha uma ou
mais sequências de algarismos (letras ou números)
(b[w]+);
//Seguidos de um arroba (@);
//Seguido de outra sequência de um ou mais
algarismos ([w]+);
//Seguidos de um ponto (.);
//Seguido de outra sequência de um ou mais
algarismos ([w]+).
20
21. Validando E-mails
<script type="text/javascript">
var texto = "cpmart@gmail.com";
var RegExp = /^[w]+@[w]+.[w|.]+$/;
if (RegExp.test(texto) == true) {
console.log(“Formato válido!");
} else {
console.log(“Formato inválido!");
}
</script>
21
22. Validando e-mails
/* Verificando se o texto recebido é iniciado por um ou mais
algarismos (^[w]+);
seguidos de arroba (@);
Seguido de um ou mais algarismos ([w]+);
Seguido(s) de um ponto (.);
Seguido (e finalizado) por um ou mais algarismos ou pontos ([w|
.]+$);
*/
22
23. Validando CPF
<script type="text/javascript">
var texto = "000.000.000-00";
var RegExp = /^[d]{3}.[d]{3}.[d]{3}-[d]
{2}$/;
if (RegExp.test(texto) == true) {
document.write("Formato válido!");
} else {
document.write("Formato inválido!");
}
</script>
23
24. Validando CPF
/* Verificando se o texto recebido é iniciado por três números
(^[d]{3});
seguidos de ponto (.);
seguido de três números ([d]{3});
seguidos de ponto (.);
seguido de três números ([d]{3});
seguidos de hífen (-);
seguido (e finalizado) por dois números ([d]{2}$);
*/
24
25. Recuperar um array
<script type="text/javascript">
var texto = "Eu nasci em 01/23/4567”;
var RegExp = /([d]{2})/([d]{2})/([d]{4})/;
if (texto.match(RegExp) != null) {
console.log("Propriedades do método match: <br>"+
"Frase: "+texto.match(RegExp).input+"<br>"+
"Posição do 1º caractere: "+texto.match(RegExp).index+"<br>"+
"Resultado da ER: "+texto.match(RegExp)[0]+"<br>"+
"Primeiro grupo: "+texto.match(RegExp)[1]+"<br>"+
"Segundo grupo: "+texto.match(RegExp)[2]+"<br>"+
"Terceiro grupo: "+texto.match(RegExp)[3]+"<br>");
} else {
console.log(“Nenhum texto ou expressão foram casados!");
}
</script>
25
26. Validando CPF
/* Verificando se o texto recebido contém dois números (([d]
{2})): veja que estão entre parênteses;
seguidos de barra (/);
Seguida de dois números (([d]{2})): veja que estão entre
parênteses;
seguidos de barra (/);
Seguida de quatro números (([d]{4})): veja que estão entre
parênteses;
Os parênteses determinam os grupos!
*/
26
27. Método Replace
O método replace é o método de uma string e é nativo
do JavaScript. No entanto, pode ser utilizado em
conjunto com as Expressões Regulares extendendo
significativamente a capacidade de manipulação dos
grupos casados na string, pela ER.
Exemplo: Suponha que no seu site existe um campo
para o usuário digitar os números do CPF. Esse campo
aceita apenas números, mas, antes do valor ser
enviado ao Banco de Dados, você deseja converter a
sequência numérica para o formato padrão do CPF,
que é: ###.###.###-## (#: qualquer número de 0 a 9).
27
28. Máscara para CPF
<script type="text/javascript">
//CPF recuperada de um campo text, por exemplo:
var texto = "00000000000";
var RegExp = /^([d]{3})([d]{3})([d]{3})([d]{2})$/;
if (texto.search(RegExp) != -1) {
var mascCPF = texto.replace(RegExp,"$1.$2.$3-$4");
document.write (mascCPF);
} else {
document.write("Nenhum texto ou expressão foram
casados!");
}
</script>
28
/* Dividindo por grupos:
Verificando se a expressão é iniciada por 3 números
(^([d]{3}));
seguidos de 3 números (([d]{3}));
seguidos de 3 números (([d]{3}));
seguidos de 2 números e finalizada (([d]{2})$);
*/