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

最新推荐文章于 2023-08-26 14:44:49 发布

xiaosong96

最新推荐文章于 2023-08-26 14:44:49 发布

阅读量703

点赞数 1

CC 4.0 BY-SA版权

分类专栏： J2EE 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/xiaosong96/article/details/84041587

J2EE 专栏收录该内容

6 篇文章

订阅专栏

本文介绍两种客户端表单验证方法：一是纯JavaScript实现，通过自定义函数检查输入是否为空并阻止无效提交；二是利用jQuery简化验证流程，提升用户体验。这两种方法避免了不必要的服务器负载，提高了表单提交效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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