如果未经验证，Javascript 将阻止表单发布

Question

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

JS 代码

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

您的代码存在几个问题。

1. 您的验证函数需要返回 false 以阻止表单提交。

2. 您正在 validateForm 函数内注册 window.onload 处理程序。因为，在调用 validateForm 函数时，表单已被提交。

3. 标记中的处理程序是validate。您的 validate 方法不会返回任何内容，因此也不会阻止提交。

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

function validate() {
    return validateForm();
}

并且应该适本地阻止提交。