O seu problema:
e quando carrego a página HTML e preenche os dados do CPF, nada acontece, não há qualquer resposta.
Ao invés de function validar () {
, utilize outro formato de escopo. No caso, validar = function () { // ... }
. Veja:
validar = function () {
var formulario = document.getElementById("formulario");
var cpf = formulario.cpf;
var email = formulario.email;
var re_cpf = /^([\d]{3})([\d]{3})([\d]{3})([\d]{2})$/;
var re_email = /^([\w-]+(\.[\w-]+)*@(([\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(\.[a-z]{2})?)$/i;
if(re_cpf.test(cpf.value)){
alert("CPF válido");}
else{
alert("CPF inválido");
}
}
Exemplo funcionando no jsFiddle.
Ainda assim, o seu próximo erro é um problema com a expressão regular. Resolvi ele para você:
validar = function () {
var formulario = document.getElementById("formulario");
var cpf = formulario.cpf;
var email = formulario.email;
var re_cpf = /^([\d]{3})([\d]{3})([\d]{3})([\d]{2})$/;
var re_email = /^([\w\.\-]+)@([\w\-]+)((\.(\w){2,3})+)$/;
if(re_cpf.test(cpf.value)){
alert("CPF válido");}
else{
alert("CPF inválido");
}
if(re_email.test(email.value)) alert('E-mail válido');
else alert('E-mail inválido');
}
Exemplo funcionando no jsFiddle (atualizado)
Por que o seu engatilhador onclick
não está engatilhando validar()
?
Baseado num questionário feito via um comentário do OP – muito bom por sinal! – vou responder essa pergunta com minimalismo:
function x () {
// do something
};
O formato acima é chamado de "declaração de função", que, por sua vez, é um modelo onde se salva a função para ser, digamos, usada "mais tarde" – não num primeiro instante. Como você pode ver, nenhuma variável é assinada à ela.
A seguir, o modelo proposto por mim:
x = function () {
// do something
};
Ele se chama "expressão de função" em tradução literal. Significa que você assina à "x
" uma função para ser usada a qualquer instante em que x
for executado.
E qual a diferença prática?
No seu caso específico, você está utilizando o observador onclick
"inline"1. O escopo dele é o DOM e vai executar uma função que já existe no momento em que o cliente clicar no elemento que você designou para desencadear a função nomeada por você como validar()
.
Enquanto validar()
for uma função que "ainda" não existe, o seu efeito não será acionado.
Mas como assim "ainda não existe"? Ele existe! Eu escrevi!
Existe, mas o seu <a>
ainda não sabe quem é ele. Se você escrever este HTML, o function validar() {}
irá funcionar:
<a href="#" onclick="validar()">Validar que funciona</a>
<script>
function validar() {
alert('hello!');
};
</script>
No seu caso, você está escrevendo JavaScript em um arquivo externo (js/aula09.js
) e portanto, ele ainda não fora declarado para o DOM.
Ainda não entendi
Se você declarar uma função como previamente explicado no mesmo arquivo em que você a chama, tudo irá funcionar conforme o esperado. Enquanto você não fizer isso, as funções devem ser expressadas – explicadas para o DOM quem é quem.
Para ilustrar, dê uma olhada neste jsFiddle. O JavaScript que está na parte inferior esquerda não irá funcionar enquanto o que está embutido no seu HTML executará o seu papel – isso acontece porque o JavaScript deste quadrado branco inferior é "externo" para o HTML.
Para fins de comparação, se você colocar em um arquivo .js
externo este conteúdo:
f = function () {
alert('Olá!');
};
E colocar em um arquivo .html
isto:
<a href="#" onclick="x()">Funciona!</a>
<a href="#" onclick="f()">Também funciona!</a>
<script>
function x() {
alert('hello!');
};
</script>
Perceberá que ambos irão funcionar, exatamente como neste outro jsFiddle.
1: Neste caso, "inline" significa que você está usando de JavaScript via HTML na linha do seu elemento – não é um efeito unobtrusivo.
}
a mais no fim do código. Cheque sua identação e verifique o que aparece no console do navegador ao usar a página.