js遏止表单提交的两种方式
js阻止表单提交的两种方式
做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" onsubmit="return check()">
- <input type="text" name="test" id="test">
- <input type="submit" value="提交">
- </form>
- </body>
- </html>
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>