Javascript表单验证器不起作用答案

【问题标题】：Javascript form validator not workingJavascript表单验证器不起作用
【发布时间】：2014-03-24 03:48:34
【问题描述】：

由于某种原因，我的表单无法正常工作，它没有给我任何形式的警报，是否有人能引导我朝着正确的方向前进事情一遍又一遍。有人可以帮忙解释一下发生了什么以及我哪里出错了吗？

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script type="text/javascript src= " src="helpme.js" >
        </script>
        <link type="text/css" rel="stylesheet" href="Style.css"></link>
</head>

<body>
<div id="header">
</div>
<div id="main">
   <form name="myForm" method="">
   <p> Name</p>
   <input id="fName" type="text" />
   <input id="mName" type="text"  size="3">
   <input id="lName" type="text" "/> 
   <p>Age</p>
   <input id="age" type="number" name="age" placeholder="20" />
   <p>Email</p>
   <input id="email" type="text" name="email"/>
   <p>Gender</p>
   <input id="gender" type="text" name="gender" size="7" placeholder="male"/>
   <p> DOB:</p> <input type="date" name="DOB" id = "DOB"value="" size="10" placeholder="mm/dd/yyyy"/>
   <p>Height</p>
   <input type="number" id="height" name="height" placeholder="5" size="5"/>
   <p>Weight</p> 
   <input type="number" id="weight" name="weight"/>
   <p>Salary</p>
   <input type="number" id="salary" name="salary"/>
   <p>       
   <input type="submit" name="Submit" value="Submit" onClick="Validate()" />
   </p>
   </form>
</div>
</body>
</html>

Java 脚本函数验证（）{

    var test= true;

    var fName = document.getElementById("fName").value;
    var mName = document.getElementById("mName").value;
    var lName = document.getElementById("lName").value;
    if (first==""||last=="")
    {
    window.alert("Enter your full name");
    test = false;
     }


    var age = document.getElementById("age").value;
    if (age==null||age=="" || age<1 || age >100)
     {
    window.alert("Enter your age");
    test = false;
      }

      var email = document.getElementById("email").value;
      var at=x.indexOf("@");
      var dot=x.lastIndexOf(".");
      if (at<1 || dot<at+2 || dot+2>=email.length)
      {
      window.alert("Not a valid e-mail address");
      test = false;
      }

var sex = document.getElementById("gender").value;
if (sex!="M" && sex!="m" && sex!="Male" && sex!="male"
   && sex!="F" && sex!="f" && sex!="Female" && sex!="female")
  {
  window.alert("Enter your gender" +
  "\nMale,M,male,m" + "\nFemale,F,female,f");  

  test = false; 
  }

var dob = document.getElementById("DOB").value;
if (dob ==null)
  {
  window.alert("Enter your date of birth as shown MM/DD/YYYY");
  test = false;
  }


var height = document.getElementById("height").value;
if (height==""||height<1)
  {
  window.alert("Enter your weight");
  test = false;
  }


var weight = document.getElementById("weight").value;
if (weight==""||weight<1 && weight>600)
  {
  window.alert("Enter your weight");
  test = false;
  }

var salary = document.getElementsById("salary").value;
if (isNaN(salary)|| salary> 999999.99|| salary<1 )
  {
 window.alert("Salary: Cannot Exceed $999999.99");
  test = false;
  }

}

【问题讨论】：

我尝试了所有方法，但仍然没有弹出空白字段

标签： javascript html validation client-side helpers

【解决方案1】：

请检查 .js 文件的路径，该文件是否在同一目录中可用，并尝试以下 javascript (helpme.js)：-

function Validate(){
  var test= true;
  var fName = document.getElementById("fName").value;
    var mName = document.getElementById("mName").value;
    var lName = document.getElementById("lName").value;
    alert(fName);
if (first==""||last=="")
    {
    window.alert("Enter your full name");
    test = false;
     }


    var age = document.getElementById("age").value;
    if (age==null||age=="" || age<1 || age >100)
     {
    window.alert("Enter your age");
    test = false;
      }

      var email = document.getElementById("email").value;
      var at=x.indexOf("@");
      var dot=x.lastIndexOf(".");
      if (at<1 || dot<at+2 || dot+2>=email.length)
      {
      window.alert("Not a valid e-mail address");
      test = false;
      }

var sex = document.getElementById("gender").value;
if (sex!="M" && sex!="m" && sex!="Male" && sex!="male"
   && sex!="F" && sex!="f" && sex!="Female" && sex!="female")
  {
  window.alert("Enter your gender" +
  "\nMale,M,male,m" + "\nFemale,F,female,f");  

  test = false; 
  }

var dob = document.getElementById("DOB").value;
if (dob ==null)
  {
  window.alert("Enter your date of birth as shown MM/DD/YYYY");
  test = false;
  }


var height = document.getElementById("height").value;
if (height==""||height<1)
  {
  window.alert("Enter your weight");
  test = false;
  }


var weight = document.getElementById("weight").value;
if (weight==""||weight<1 && weight>600)
  {
  window.alert("Enter your weight");
  test = false;
  }

var salary = document.getElementsById("salary").value;
if (isNaN(salary)|| salary> 999999.99|| salary<1 )
  {
 window.alert("Salary: Cannot Exceed $999999.99");
  test = false;
  }

}

希望对你有所帮助。

【讨论】：

【解决方案2】：

您可以将输入类型从“提交”更改为按钮，它工作正常。

但是，您的 JS 代码抛出了一些我认为您可以修复的错误。未定义第一个和最后一个关键字。

谢谢。让我知道任何其他需要的澄清。

 <input type="button" name="Submit" value="Submit" onClick="Validate()" />

【讨论】：

【解决方案3】：

请使用 onsubmit 事件

<form onsubmit="Validate()">

如果验证未通过，则返回 false，不要指定 test = false 只返回 false。

    function Validate() {

      // var test= true;

    var fName = document.getElementById("fName").value;
    var mName = document.getElementById("mName").value;
    var lName = document.getElementById("lName").value;
    if (first==""||last=="")
    {
    window.alert("Enter your full name");
    return false;
     }


    var age = document.getElementById("age").value;
    if (age==null||age=="" || age<1 || age >100)
     {
    window.alert("Enter your age");
    return false;
      }

      var email = document.getElementById("email").value;
      var at=x.indexOf("@");
      var dot=x.lastIndexOf(".");
      if (at<1 || dot<at+2 || dot+2>=email.length)
      {
      window.alert("Not a valid e-mail address");
    return false;
      }

var sex = document.getElementById("gender").value;
if (sex!="M" && sex!="m" && sex!="Male" && sex!="male"
   && sex!="F" && sex!="f" && sex!="Female" && sex!="female")
  {
  window.alert("Enter your gender" +
  "\nMale,M,male,m" + "\nFemale,F,female,f");  

    return false;
  }

var dob = document.getElementById("DOB").value;
if (dob ==null)
  {
  window.alert("Enter your date of birth as shown MM/DD/YYYY");
    return false;
  }


var height = document.getElementById("height").value;
if (height==""||height<1)
  {
  window.alert("Enter your weight");
    return false;
  }


var weight = document.getElementById("weight").value;
if (weight==""||weight<1 && weight>600)
  {
  window.alert("Enter your weight");
    return false;
  }

var salary = document.getElementsById("salary").value;
if (isNaN(salary)|| salary> 999999.99|| salary<1 )
  {
 window.alert("Salary: Cannot Exceed $999999.99");
    return false;
  }
    return true;
}

【讨论】：

【解决方案4】：

使用此代码：

第一个和最后一个未定义的变量有问题
现在它的作品很棒
祝你好运！

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script>
            function Validate() {

      // var test= true;

    var fName = document.getElementById("fName").value;
    var mName = document.getElementById("mName").value;
    var lName = document.getElementById("lName").value;
    if (fName==""||lName=="")
    {
    window.alert("Enter your full name");
    return false;
     }


    var age = document.getElementById("age").value;
    if (age==null||age=="" || age<1 || age >100)
     {
    window.alert("Enter your age");
    return false;
      }

      var email = document.getElementById("email").value;
      var at=x.indexOf("@");
      var dot=x.lastIndexOf(".");
      if (at<1 || dot<at+2 || dot+2>=email.length)
      {
      window.alert("Not a valid e-mail address");
    return false;
      }

var sex = document.getElementById("gender").value;
if (sex!="M" && sex!="m" && sex!="Male" && sex!="male"
   && sex!="F" && sex!="f" && sex!="Female" && sex!="female")
  {
  window.alert("Enter your gender" +
  "\nMale,M,male,m" + "\nFemale,F,female,f");  

    return false;
  }

var dob = document.getElementById("DOB").value;
if (dob ==null)
  {
  window.alert("Enter your date of birth as shown MM/DD/YYYY");
    return false;
  }


var height = document.getElementById("height").value;
if (height==""||height<1)
  {
  window.alert("Enter your weight");
    return false;
  }


var weight = document.getElementById("weight").value;
if (weight==""||weight<1 && weight>600)
  {
  window.alert("Enter your weight");
    return false;
  }

var salary = document.getElementsById("salary").value;
if (isNaN(salary)|| salary> 999999.99|| salary<1 )
  {
 window.alert("Salary: Cannot Exceed $999999.99");
    return false;
  }
    return true;
}
        </script>
        <link type="text/css" rel="stylesheet" href="Style.css"></link>
</head>

<body>
<div id="header">
</div>
<div id="main">
    <form name="myForm" method="POST" onsubmit="Validate()">
   <p> Name</p>
   <input id="fName" type="text" />
   <input id="mName" type="text"  size="3">
   <input id="lName" type="text" "/> 
   <p>Age</p>
   <input id="age" type="number" name="age" placeholder="20" />
   <p>Email</p>
   <input id="email" type="text" name="email"/>
   <p>Gender</p>
   <input id="gender" type="text" name="gender" size="7" placeholder="male"/>
   <p> DOB:</p> <input type="date" name="DOB" id = "DOB"value="" size="10" placeholder="mm/dd/yyyy"/>
   <p>Height</p>
   <input type="number" id="height" name="height" placeholder="5" size="5"/>
   <p>Weight</p> 
   <input type="number" id="weight" name="weight"/>
   <p>Salary</p>
   <input type="number" id="salary" name="salary"/>
   <p>       
   <input type="submit" name="Submit" value="Submit" />
   </p>
   </form>
</div>
</body>
</html>

【讨论】：