jquery、js阻止表单提交的不同方法

最新推荐文章于 2024-09-08 21:45:17 发布

菜鸟面条

最新推荐文章于 2024-09-08 21:45:17 发布

阅读量9.5k

点赞数 1

分类专栏： javaweb 文章标签：表单提交 js

javaweb 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

做web开发的，写表单提交的代码那是家常便饭。既然是要提交表单，那肯定就会进行表单验证。表单验证的问题一直都是一件头疼的事情，争议也比较大。有些程序员会把验证放在服务器端，让服务器来进行验证，试想，这样把数据传来传去，效率有多低啊！！如果表单里的数据量过大，则会严重占用服务器带宽。何况现在是WEB2.0的时代了，随着Google、网易等使用Ajax技术的兴起，把表单验证放在服务器端，实在是太落后了。

现在，我们就来看看，如何把表单验证放在浏览器客户端，把验证工作交给浏览器来做，这必定要用到JavaScript。那么就瞧瞧下面两种验证方法，一种是纯JavaScript验证，第二种是引用jQuery库来进行验证。

1、JavaScript验证阻止提交表单

<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gbk">  
<title>JavaScript禁止提交表单</title>  
<script type="text/javascript">  
function getObj(id){  
    var Obj = document.getElementById(id).value;  
    return Obj;  
}  
function check(){  
    if(getObj("test")==""){  
        alert("文本框输入为空，不能提交表单！");  
        document.getElementById("test").focus;  
       return false;//false:阻止提交表单   }  
}  
</script>  
</head>  
<body>  
<form action="index.htm" method="post" οnsubmit="return check()">  
<input type="text" name="test" id="test">  
    <input type="submit" value="提交">  
</form>  
</body>  
</html>

上面的方法在谷歌浏览器中不能够实现，但在ie浏览器中可以实现
2、jQuery验证阻止表单提交

<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gbk">  
<script type="text/javascript" src="/sunchis/script/jquery-1.3.2.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
 $(":submit[id=tijiao]").click(function(check){  
        var val = $(":text[id=test]").val();  
        if(val==""){  
            alert("文本框输入为空，不能提交表单！");  
            $(":text[id=test]").focus();  
           check.preventDefault();//此处阻止提交表单  
        }  
    });  
});  

</script>  
<title>jQuery禁止提交表单</title>  
</head>  
<body>  
<form action="index.htm" method="post">  
   <input type="text" name="test" id="test">  
   <input type="submit" id="tijiao" value="提交">  
</form>  
</body>  
</html>

js包需要导入
感谢作者，本文引自：http://www.sucaiweb.com/Web-Lessons/JS-JQurey/420.html