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.

1. Formulários
Cristiano Pires Martins
Fonte: JavaScript - Guia do Programador - Maujor
1

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

6. Controles de Formulário
input
type
text
password
checkbox
radio
submit
reset
file
hidden
image
button
accesskey
tabindex
name
src
alt
size
Maxlength
value (obrig. checkbox e radio)
checked (obrig. checkbox e radio)
readonly
disabled
usemap
align
6

7. Objeto formulário
7
HTML
<form method=” ” action=” ” id=”fdemo”>
...
</form>
JavaScript
<script type=”text/javascript”>
window.onload = function( ){
var formdemo =
document.getElementById(“fdemo”);
}
</script>

8. Objeto formulário
8
HTML
<form method=” ” action=” ” id=”fdemo”>
...
</form>
JavaScript
<script type=”text/javascript”>
window.onload = function( ){
var formdemo = document.forms[0];
}</script>
ou
<script type=”text/javascript”>
window.onload = function( ){
var formdemo = document.forms[“fdemo”];
}</script>

9. Propriedades do objeto form
action
9
HTML
<form method=”post” action=”http://www.maujor.com”
id=”fdemo”>
...
</form>
JavaScript
<script type=”text/javascript”>
window.onload = function( ){
var fdemo = document.getElementById(“fdemo”);
alert(fdemo.action); //alerta http://www.maujor.com
}
</script>

10. Propriedades do objeto form
method
10
HTML
<form method=”post” action=” ” id=”fdemo”>
...
</form>
JavaScript
<script type=”text/javascript”>
window.onload = function( ){
var fdemo = document.getElementById(“fdemo”);
alert(fdemo.method); //alerta post
}
</script>

11. Propriedades do objeto form
name
11
HTML
<form method=”post” action=” ” id=”fdemo” name=”fnome”>
...
</form>
JavaScript
<script type=”text/javascript”>
window.onload = function( ){
var fdemo = document.getElementById(“fdemo”);
alert(fdemo.name); //alerta fnome
}
</script>

12. Propriedades do objeto form
length
12
HTML
<form method=”post” action=” ” id=”fdemo”>
<label for=”nome”>Nome:</label>
<input type=”text” id=”nome”/>
<label for=”email”>Email:</label>
<input type=”text” id=”email”/>
<input type=”submit” value=”OK”/>
</form>
JavaScript
<script type=”text/javascript”>
window.onload = function( ){
var fdemo = document.getElementById(“fdemo”);
alert(fdemo.length); //alerta 3
}
</script>
Retorna a quantidade
de controles existentes
no formulário

13. Propriedades do objeto form
elements
13
HTML
<form method=”post” action=” ” id=”fdemo”>
<label for=”nome”>Nome:</label>
<input type=”text” id=”nome”/>
<label for=”email”>Email:</label>
<input type=”text” id=”email”/>
<input type=”submit” value=”OK”/>
</form>
JavaScript
<script type=”text/javascript”>
window.onload = function( ){
var fdemo = document.getElementById(“fdemo”);
alert(fdemo.elements[1].tagName); //alerta INPUT
alert(fdemo.elements.item(2).value); //alerta OK
alert(fdemo.elements.item(0).value);
alert(fdemo.elements.item(1).value);
}
</script>
Retorna uma coleção de
todos os controles
existentes no formulário

14. FOrm - html5
Apenas letras
<input type="text" required="required" name="text"
pattern="[a-zs]+$" />
Apenas números
<input type="text" required="required" name="numbers"
pattern="[0-9]+$" />
Data
<input type="date" required="required" maxlength="10"
name="date" pattern="[0-9]{2}/[0-9]{2}/[0-9]{4}$"
min="2012-01-01" max="2014-02-18" />
14

15. FORM - HTML5
Hora
<input type="time" required="required"
maxlength="8" name="hour" pattern="[0-9]{2}:[0-9]
{2} [0-9]{2}$" />
Campos genéricos de texto
<input type="text" required="required"
name="name" />
15

16. Validação: Senha
16
<html>
<head>
<title>Validade Senha</title>
<script>
function validarSenha(){
senha1 = document.f1.senha1.value
senha2 = document.f1.senha2.value
if (senha1 == senha2)
alert("SENHAS IGUAIS")
else
alert("SENHAS DIFERENTES")
}
</script>
</head>
<body>
VALIDAR SENHA
<br>
<form action="" name="f1">
Senha: <input type="password" name="senha1" size="20">
<br>
Confirmar Senha: <input type="password" name="senha2" size="20">
<br>
<input type="button" value="Validar" onClick="validarSenha()">
</form>
</body>
</html>

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})$);
*/

29. Validação:
Verifica CEP
29
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
function Trim(strTexto)
{
return strTexto.replace(/^s+|s+$/g, '');
}
function IsCEP(strCEP)
{
var objER = /^[0-9]{2}.[0-9]{3}-[0-9]{3}$/;
strCEP = Trim(strCEP)
if(strCEP.length > 0)
{
if(objER.test(strCEP))
alert("CEP válido!");
else
alert("CEP inválido!");
}
else
alert("Caixa de Texto Vazia");
}
</script>
<form name="frm">
<label for="cep">CEP:</label>
<input type="text" size="12" id="cep" name="cep" onblur="IsCEP(frm.cep.value);">
</form>
</body>
</html>