Javascript防止表单post，如果没有验证

Javascript to prevent form post if not validated

本文关键字：如果没有 验证 post 表单 Javascript      更新时间：2023-09-26

对于一个简单的表单，我有以下验证代码。我能够执行基本的验证，但表单仍然得到张贴，即使数据是错误的，并产生警报。我怎样才能阻止这一切发生呢?

<

JS代码/strong> 

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>

您的代码有几个问题。

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

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

  3. 标记中的处理程序是validate。你的validate方法不返回任何东西，所以提交也不会被阻止。

修复一切的最简单方法是从代码中完全删除window.onload处理程序。然后您可以将validate更改为:

function validate() {
    return validateForm();
}

我让它工作了。而不是调用validate()，在调用validateForm()我直接调用validateForm()在onsubmit。谢谢你的帮助。

相关文章：