js遏止表单提交的两种方式-JavaSript-爱易网页

js遏止表单提交的两种方式

日期：2014-05-16　浏览次数：20578 次

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==

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

js遏止表单提交的两种方式

1、JavaScript验证阻止提交表单

2、jQuery验证阻止表单提交

相关资料更多>

推荐阅读更多>