使用JS和JQuery 阻止表单提交的两种方法
做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>
注意:方法二中要使用要jQuery库,jQuery库(实际上就是一个JS文件)可以到 http://jquery.com 上去下载。
本文固定链接:http://www.penglig.com/post-153.html
本文由Cfans_gpl原创或编辑,互联分享,尊重版权,转载请以链接形式标明本文地址。
本文由Cfans_gpl原创或编辑,互联分享,尊重版权,转载请以链接形式标明本文地址。