Question

我有一个简单表格的以下验证码。我能够执行基本验证，但即使数据错误并生成警报，表单仍会发布。我怎么能阻止这种情况发生？

JS CODE

function validate(){
    validateForm();

}

function validateForm() {

    var x = document.forms["myForm"]["fname"].value;
    var y = document.forms["myForm"]["pname"].value;
    var email = document.forms["myForm"]["email"].value;
    var phone = document.forms["myForm"]["phone"].value;
    var date = document.forms["myForm"]["date"].value;
    var month = document.forms["myForm"]["month"].value;
    var year = document.forms["myForm"]["year"].value;



    window.load = function() {
  var myForm = document.getElementById('myForm');
  myForm.onsubmit = function(e) {
      return validateForm(); // will be false if the form is invalid
  }  
}


    if (x == null || x == "") {
        alert("Name must be filled out");
        return false;}
    else if (y == null || y == "") {
        alert("Address must be filled out");
        return false;       
    }
    else if(email == '' || email.indexOf('@') == -1 || email.indexOf('.') == -1) 
    {
        alert("Insert Valid Email Address");
        return false;   
        }
    else if(phone == ''|| phone <1000000000 || phone >9999999999){

        alert("Enter valid phone number");
        return false;   

        }else if(date =='' || date<01 || date >31){

        alert("Enter valid date ");
        return false;   

        }else if(month =='' || month<1 || month >12){

        alert("Enter valid month ");
        return false;   

        }else if(year =='' || year<1800 || year >2015){
        alert("Enter valid year ");
        return false;   

        }   
}

表格

        <form name="myForm" action="http://www.randyconnolly.com/tests/process.php" onsubmit="return validate()" method="post">
    <table width="30%" border="0" align="center" cellpadding="10" cellspacing="20">
      <tr>
        <td width="20%"> <span style="font-size: 22px">Name:</span><br>
          <br /></td>
        <td width="80%"><input type="text" name="fname" required /></td>
      </tr>
      <tr>
        <td><span style="font-size: 22px">Picture Name: <br>
          <br></span></td>
        <td><input type="text" name="pname" required /></td>
      </tr>
      <tr>
        <td><span style="font-size: 22px">Email:</span> <br>
          <br></td>
        <td><input type="text" name="email" required /></td>
      </tr>
      <tr>
        <td><span style="font-size: 22px">Phone:</span> <br>
          <br></td>
        <td><input type="number" name="phone" required /></td>
      </tr>
      <tr>
        <td><span style="font-size: 22px">Date(mm/dd/yyyy):</span></td>
        <td><input type="text" name="month" size="2" required />
    /
      <input type="text" name="date" size="2" required  />
    /
    <input type="text" name="year" size="4" required /></td>
      </tr>
      <tr>
        <td><span style="font-size: 22px">Artwork</span></td>
        <td><input type="file" accept="image/gif" name="pic" ></td>
      </tr>
    </table>
    <br><br>
    <input class="button-0"  type="submit" value="Submit" />
    <br>
    </form>

Answer 1

您的代码存在多个问题。

您的验证功能需要返回false以阻止表单提交。
您正在window.onload函数中注册validateForm处理程序。因为调用validateForm函数的时间已经提交了表单。
标记中的处理程序为validate。您的validate方法不会返回任何内容，因此也不会阻止提交。

解决所有问题的最简单方法是从代码中删除window.onload处理程序。然后，您可以将validate更改为：

function validate() {
    return validateForm();
}

应妥善预防提交。

Answer 2

我得到了它的工作。我没有调用validate（）并且在调用validateForm（）时直接在onsubmit上调用了validateForm（）。谢谢你的帮助。

如果没有验证，Javascript以防止表单发布

2 个答案: