堆栈内存溢出
  简体   繁体   English

JavaScript表单验证程序不起作用

[英]Javascript form validator not working

 原文  2014-03-24 03:48:34  4   4    javascript/ html/ validation/ client-side/ helpers

问题描述

For some reason my form doesn't work it doesn't give me any form of alert can some one lead me in the right direction I've spent hours looking for a solution and I hit a brick wall, trying the same things over and over. 出于某种原因，我的表单无法正常工作，没有给我任何形式的警报，有人可以引导我朝正确的方向前进。我花了数小时寻找解决方案，然后撞上了砖墙，反复尝试同样的事情，过度。 Can someone please help and explain whats going on and where I went wrong? 有人可以帮忙解释一下发生了什么事以及我哪里出错了吗？ 

<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 Script function Validate() { Java脚本函数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");
    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;
  }

}

4 个解决方案

解决方案1
 1  2014-03-24 04:07:46

Please check the path of the .js file, whether the file is available on same directory or not and try the below javascript (helpme.js):- 请检查.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;
  }

}

Hope it will help you. 希望对您有帮助。

解决方案2
 0  2014-03-24 04:12:54

You can change the input type from 'submit' to button and it works fine. 您可以将输入类型从“提交”更改为按钮，它可以正常工作。

However, your JS code is throwing some error which I think you can fix. 但是，您的JS代码抛出了一些错误，我认为您可以修复。 First and Last Keywords are not defined. 未定义“第一关键字”和“最后关键字”。

Thanks. 谢谢。 Let me know for any other clarification required. 让我知道是否需要其他说明。 

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

解决方案3
 0  2014-03-24 04:26:51

Please Use onsubmit Event for it 请使用onsubmit事件 

<form onsubmit="Validate()">

Return false if validate not passed, don't assign test = false just return false. 如果未通过验证，则返回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
 0  2014-03-24 18:53:44

Use this code: 使用此代码：

it was a problem with undefined variables first and last 首先和最后一个未定义的变量是一个问题
Now its works great 现在它的作品很棒
Good luck! 祝好运！ 

<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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Javascript表单验证器功能无法正常工作 - Javascript form validator function not working properly 我的 Javascript 表单验证器不工作（？ - My Javascript Form Validator isn't working (? 解析JavaScript表单验证器 - Parsely javascript form validator JavaScript表单验证器 - JavaScript form validator JavaScript GPA表单验证器 - JavaScript GPA form validator 我在 Javascript 中的 HTML 表单验证器似乎无法正常工作 - My HTML form validator in Javascript doesn't seem to be working 网址验证程序无法正常运行javascript - url validator is not working javascript 需要 javascript 表单验证器的帮助 - Require help with javascript form validator 表单验证无法与Bootstrap验证器一起使用 - Form validation not working with Bootstrap validator 验证器 - 不显眼的表单重置不起作用 - validator - unobtrusive form reset not working
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM