SdevLab – Tutorial | JavaScript Validação de Formulários

Fala Galera,

Para encerrar a série de posts sobre JavaScript, um exemplo de utilidade desta linguagem – validação de formulários.

Boa leitura!

ATUALIZAÇÃO (24/08/2015): Este post foi escrito com base nos tutoriais do W3C para JavaScript ECMA-262 (dei um curso de linguagens web em 2010 mais ou menos e foi deste curso que surgiu a série de posts). O link de referência deste post, ou de posts seguintes desta mesma série, hoje aponta para a versão ECMAScript 5, logo não é mais válido. O conteúdo está correto, mas não é sobre a versão mais atual!

Validação de Formulários em JavaScript

Para encerrar e cumprir o que foi prometido, segue abaixo o exemplo de uma validação de formulário em JavaScript.

<html>
<head>

function validateForm()
{
var x=document.forms["form"]["name"].value;
var y=document.forms["form"]["email"].value
var atpos=y.indexOf("@");
var dotpos=y.lastIndexOf(".");
if (x==null || x=="")
{
alert("Campo nome precisa ser preenchido!");
return false;
}
if (atpos=y.length)
{
alert("Digite um endereço de e-mail válido!");
return false;
}
}

</head>
<body>
<form name="form" action="" onsubmit="return validateForm()" method="post">
Nome: <input type="text" name="name">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>
</body>
</html>

No exemplo fazemos dois testes simples. No primeiro teste somente estamos conferindo se o usuário preencheu o campo. No segundo teste, conferimos se ele digitou um endereço de e-mail válido somente tratando a string digitada. Primeiro ele confere se tem algum texto antes do caracter @. Depois, procura algo do tipo gmail, hotmail, que indica o servidor de e-mail utilizado, e para finalizar, ele procura um “.” e o complemento, por exemplo “.com.br”.

E assim encerro esta ideia que era colocar o básico sobre JavaScript aqui no blog, próximo post, assunto novo!

Até a próxima!
xD

Fonte: w3schools.com

Um comentário sobre “SdevLab – Tutorial | JavaScript Validação de Formulários

  1. Pingback: SdevLab – Curso | Aprenda JavaScript ECMA-262 Online | Sanoj's devLab

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s