JavaScript 表单验证函数有问题

Question

我的 "validate" 功能似乎由于某种原因没有激活。

我试过使用 onsubmit 和 onclick，也试过使用 ID 代替 name.

脚本已经预加载到 head。

function validar() {
  var nome = formulario.nome.value;
  var email = formulario.email.value;
  var cpf = formulario.cpf.value;
  var telefone_fixo = formulario.telefone_fixoe.value;
  var telefone_celular = formulario.telefone_celular.value;
  var login = formulario.login.value;
  var senha = formulario.senha.value;
  var rep_senha = formulario.rep_senha.value;

  if (nome == "") {
    alert("Preencha o campo com seu NOME");
    formulario.nome.focus();
    return false;
  }
  if (nome.lenght < 5) {
    alert("Digite seu NOME COMPLETO");
    formulario.nome.focus();
    return false;
  }
  if (cpf.lenght < 11) {
    alert("Digite apenas os números do CPF");
    formulario.cpf.focus();
    return false;
  }
  if (telefone_fixo < 10) {
    alert("Digite apenas os números do TELEFONE");
    formulario.telefone_fixo.focus();
    return false;
  }
  if (telefone_celular < 11) {
    alert("Digite apenas os números do CELULAR");
    formulario.telefone_celular.focus();
    return false;
  }
  if (senha != rep_senha) {
    alert("SENHAS não são iguais");
    return false;
  }
}

<form id="formulario">
  <div>PREENCHA OS CAMPOS COM SEUS DADOS REAIS:</div><br/> Nome:

  <br/>
  <input type="text" id="nome" name="nome"><br/><br/> Email:
  <br/>
  <input type="text" id="email" name="email" placeholder="exemplo@exemplo.com"><br/><br/> CPF:
  <font size="1">(Digite apenas números)</font><br/>
  <!--Função de CSS invadindo o HTML provisoriamente-->
  <input type="text" id="cpf" name="cpf" placeholder="000.000.000-00"><br/><br/> Telefone:
  <font size="1">(Digite apenas números)</font><br/>
  <!--Função de CSS invadindo o HTML provisoriamente²-->
  <input type="text" id="telefone_fixo" name="telefone_fixo" placeholder="(00) 0000-0000"><br/><br/> Celular:
  <font size="1">(Digite apenas números)</font><br/>
  <!--Função de CSS invadindo o HTML provisoriamente³-->
  <input type="text" id="telefone_celular" name="telefone_celular" placeholder="(00) 00000-0000"><br/><br/><br/>

  <div>ESCOLHA SEU LOGIN E SUA SENHA:</div><br/> Login:

  <br/>
  <input type="text" id="login" name="login"><br/><br/> Senha:
  <br/>
  <input type="password" id="senha" name="senha"><br/><br/> Repetir Senha:<br/>
  <input type="password" id="rep_senha" name="rep_senha"><br/><br/><br/>

  <input type="submit" value="Enviar" onclick="return validar()">
  <input type="reset" value="Limpar" name="limpar">
</form>

Answer 1

拼写错误的长度
拼写错误的 fixo
在 phone 个数字上缺少 .length
您需要附加到提交处理程序并在错误时使用 preventDefault

function validar(e) {
  var formulario = this;
  var nome = formulario.nome.value;
  var email = formulario.email.value;
  var cpf = formulario.cpf.value;
  var telefone_fixo = formulario.telefone_fixo.value;
  var telefone_celular = formulario.telefone_celular.value;
  var login = formulario.login.value;
  var senha = formulario.senha.value;
  var rep_senha = formulario.rep_senha.value;
  var error = false

  if (nome == "") {
    alert("Preencha o campo com seu NOME");
    formulario.nome.focus();
    error = true;
  }
  if (!error && nome.lenght < 5) {
    alert("Digite seu NOME COMPLETO");
    formulario.nome.focus();
    error = true;
  }
  if (!error && cpf.length < 11) {
    alert("Digite apenas os números do CPF");
    formulario.cpf.focus();
    error = true;
  }
  if (!error && telefone_fixo.length < 10) {
    alert("Digite apenas os números do TELEFONE");
    formulario.telefone_fixo.focus();
    error = true;
  }
  if (!error && telefone_celular.length < 11) {
    alert("Digite apenas os números do CELULAR");
    formulario.telefone_celular.focus();
    error = true;
  }
  if (!error && senha != rep_senha) {
    alert("SENHAS não são iguais");
    error = true;
  }
  if (error) e.preventDefault();
}

window.addEventListener("load",function() {
  document.getElementById("formulario").addEventListener("submit",validar);
})

<form id="formulario">
  <div>PREENCHA OS CAMPOS COM SEUS DADOS REAIS:</div><br/> Nome:

  <br/>
  <input type="text" id="nome" name="nome"><br/><br/> Email:
  <br/>
  <input type="text" id="email" name="email" placeholder="exemplo@exemplo.com"><br/><br/> CPF:
  <font size="1">(Digite apenas números)</font><br/>
  <!--Função de CSS invadindo o HTML provisoriamente-->
  <input type="text" id="cpf" name="cpf" placeholder="000.000.000-00"><br/><br/> Telefone:
  <font size="1">(Digite apenas números)</font><br/>
  <!--Função de CSS invadindo o HTML provisoriamente²-->
  <input type="text" id="telefone_fixo" name="telefone_fixo" placeholder="(00) 0000-0000"><br/><br/> Celular:
  <font size="1">(Digite apenas números)</font><br/>
  <!--Função de CSS invadindo o HTML provisoriamente³-->
  <input type="text" id="telefone_celular" name="telefone_celular" placeholder="(00) 00000-0000"><br/><br/><br/>

  <div>ESCOLHA SEU LOGIN E SUA SENHA:</div><br/> Login:

  <br/>
  <input type="text" id="login" name="login"><br/><br/> Senha:
  <br/>
  <input type="password" id="senha" name="senha"><br/><br/> Repetir Senha:<br/>
  <input type="password" id="rep_senha" name="rep_senha"><br/><br/><br/>

  <input type="submit" value="Enviar">
  <input type="reset" value="Limpar" name="limpar">
</form>

JavaScript 表单验证函数有问题

Trouble with JavaScript Form Validation Function

javascript

html

forms

validation

submit