你的位置:首页 > Java教程

[Java教程]阻止form表单提交的问题


  阻止form表单提交这种场景可能在生活中,我们经常碰到,而在我们第一印象里面可能我们用return false 去阻止表单默认行为。

  但是,有中情况我们用return false 不能阻止表单提交

  <div class="warp">    <h2>登录到pfan空间</h2>    <p>这里有更多的知识分享,交流。</p>    <form action="/register" method = "post" >      <input type="text" name = "username" placeholder = "请输入注册用户名"> <br />      <input type="password" name = "pwd" placeholder = "请输入初始密码">  <br />      <input type="password" name = "aginpwd" placeholder = "请再次输入密码">  <br />      <input type="submit" value ="注册" class="login_btn">    </form>  </div><script>  var form = document.forms[0],    submit = document.querySelector(".login_btn"),    inputBtn = document.getElementsByTagName("input");    console.log(form);  form.addEventListener("submit",function(){    if(inputBtn[0].value == ""){      alert("请您认真填写注册用户名!");        return false;    }else if(inputBtn[1].value == ""){      alert("请您认真输入初始密码!");        return false;    }else if(inputBtn[2].value == ""){      alert("请您再次输入密码");        return false;    }else if(inputBtn[1].value != inputBtn[2].value){      alert("两次密码输入不匹配,请更正!");        return false;    }    },false);</script>

  以上代码我们看着,好像没有错误,但是,表单依然可以提交,测试环境chrome。

  但是我们将return false 改成用 e.preventDefault(),却可以达到阻止表单提交的效果:

  <div class="warp">    <h2>登录到pfan空间</h2>    <p>这里有更多的知识分享,交流。</p>    <form action="/register" method = "post" >      <input type="text" name = "username" placeholder = "请输入注册用户名"> <br />      <input type="password" name = "pwd" placeholder = "请输入初始密码">  <br />      <input type="password" name = "aginpwd" placeholder = "请再次输入密码">  <br />      <input type="submit" value ="注册" class="login_btn">    </form>  </div><script>  var form = document.forms[0],    submit = document.querySelector(".login_btn"),    inputBtn = document.getElementsByTagName("input");    console.log(form);  form.addEventListener("submit",function(e){    if(inputBtn[0].value == ""){      alert("请您认真填写注册用户名!");      e.preventDefault();    }else if(inputBtn[1].value == ""){      alert("请您认真输入初始密码!");      e.preventDefault();    }else if(inputBtn[2].value == ""){      alert("请您再次输入密码");      e.preventDefault();    }else if(inputBtn[1].value != inputBtn[2].value){      alert("两次密码输入不匹配,请更正!");      e.preventDefault();    }    },false);</script>

  另一种就是将其改成用onsubmit:

  <div class="warp">    <h2>登录到pfan空间</h2>    <p>这里有更多的知识分享,交流。</p>    <form action="/register" method = "post" >      <input type="text" name = "username" placeholder = "请输入注册用户名"> <br />      <input type="password" name = "pwd" placeholder = "请输入初始密码">  <br />      <input type="password" name = "aginpwd" placeholder = "请再次输入密码">  <br />      <input type="submit" value ="注册" class="login_btn">    </form>  </div><script>  var form = document.forms[0],    submit = document.querySelector(".login_btn"),    inputBtn = document.getElementsByTagName("input");    console.log(form);  form.onsubmit = function(){    if(inputBtn[0].value == ""){      alert("请您认真填写注册用户名!");      return false;    }else if(inputBtn[1].value == ""){      alert("请您认真输入初始密码!");      return false;    }else if(inputBtn[2].value == ""){      alert("请您再次输入密码");      return false;    }else if(inputBtn[1].value != inputBtn[2].value){      alert("两次密码输入不匹配,请更正!");      return false;    }        }</script>

 

 

  参考资料 

  http://stackoverflow.com/questions/4924036/return-false-on-addeventlistener-submit-still-submits-the-form