阻止表单提交和提交

来源：互联网发布：魔方数据恢复软件编辑：程序博客网时间：2024/06/03 22:42

之前知道submit可以直接表单提交，然后第一次要阻止表单提交，于是百度知道提交会触发onsubmit事件，于是有了下面的代码

<form id="register" name="register" method="get" action="https://www.baidu.com" onsubmit="return checkForm();"><input type="text" name="userName" placeholder="用户名" autocomplete="off"/><input type="submit" name="submit1" value="注册"/></form>

<script type="text/javascript">$(function(){function checkForm(){             if($("input[name='userName']").val()){            return true;             }else{            return false;              }             }})

然后发现这个函数死活不能阻止执行…… 然后又花了一大番精力，简直是，终于发现原因，这里的checkForm()函数不能放在$(function(){})里面，挪出去后，终于可以执行了，但是可能当时浏览器抽风了，不管怎么都进不了else里面，表单不管怎么都提交了……，最后过了一天又测试，其实是可以的。

当时看这个实在不行，然后就想直接用button模拟提交，与是有了下面的代码

<form id="register" name="register" method="get" action="https://www.baidu.com" onsubmit="return checkForm();"><input type="text" name="userName" placeholder="用户名" autocomplete="off"/><input type="button" name="show" value="点击"/> </form>

<script type="text/javascript">$(function(){var name = '';$("input[name='userName']").blur(function(){if($(this).val()){name = $(this).val();}});$("input[name='show']").click(function(){if(name){     //alert("ok");     $("form#register").submit();}else{alert("不能提交");}})})

可能是同一天浏览器真的抽风了，这样倒是不满足条件不能提交了，但是满足情况下执行函数submit()后，居然一直不跳转页面，真的是要吐血了……当时以为这种也不行，后面证实这个方法是可以的。

在以为上面的方法也不行的时候，于是又继续……这个方法浏览器当时挺正常的。

<form id="register" name="register" method="get" action="https://www.baidu.com" onsubmit="return checkForm();"><input type="text" name="userName" placeholder="用户名" autocomplete="off"/><input type="submit" name="submit1" value="注册"/></form>

<script type="text/javascript">$(function(){var name = '';$("input[name='userName']").blur(function(){if($(this).val()){name = $(this).val();}});$("input[name='submit1']").click(function(){if(name){return true;}else{return false;}})})

不相信前面的代码真有问题，第二天重新测试，前面改进的方法有的是可以的，当时不仅是浏览器抽风了，也是我的知识不扎实，不然就不会有第一次check()函数放的位置的问题了，搞了大半天，最后来个汇总吧：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>登录处理页面</title><script src="js/jquery-3.0.0.js" type="text/javascript"></script></head><body>    <form id="register" name="register" method="get" action="https://www.baidu.com" onsubmit="return checkForm();"><input type="text" name="userName" placeholder="用户名" autocomplete="off"/><input type="submit" name="submit1" value="注册"/><input type="button" name="show" value="点击"/> </form><script type="text/javascript">$(function(){var name = '';$("input[name='userName']").blur(function(){if($(this).val()){name = $(this).val();}});//方法一：/*$("input[name='show']").click(function(){if(name){//alert("ok");$("form#register").submit();}else{alert("不能提交");}})*///方法二：$("input[name='submit1']").click(function(){if(name){return true;}else{return false;}})})//方法三：<span style="color:#FF0000;">注意写在$(function(){})外面也就是放dom ready那个匿名函数外面</span>，要不外部无法访问，onsubmit访问的函数需要在window作用域下/*function checkForm(){if($("input[name='userName']").val()){return true;}else{return false;}}*/</script></body></html>

注意：

1. onsubmit="return checkForm();" //<span style="color:#FF0000;">不能省略return,函数名尽量不要取关键字</span>2. checkForm（）函数的位置3. 只选择一种方式提交，不要多次提交

0 0