阻止表单提交和提交

最新推荐文章于 2024-07-09 10:31:03 发布

白日梦想jun

最新推荐文章于 2024-07-09 10:31:03 发布

阅读量2.6k

点赞数

分类专栏： Jquery 文章标签：表单提交阻止表单提交 jq表单提交

本文链接：https://blog.csdn.net/oiu1010110/article/details/52841981

版权

Jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

<form id="register" name="register" method="get" action="https://www.baidu.com" οnsubmit="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" οnsubmit="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" οnsubmit="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" οnsubmit="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. οnsubmit="return checkForm();" //<span style="color:#FF0000;">不能省略return,函数名尽量不要取关键字</span>
2. checkForm（）函数的位置
3. 只选择一种方式提交，不要多次提交

白日梦想jun

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
阻止表单提交和提交

之前知道submit可以直接表单提交，然后第一次要阻止表单提交，于是百度知道提交会触发onsubmit事件，于是有了下面的代码 $(function(){ function checkForm(){ if($("input[name='userName']").val()){ return true;
复制链接

扫一扫

专栏目录