做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;
- }
- }
- </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>
分享到：
相关推荐
首先，我们来看如何使用return false来阻止表单提交。在JavaScript中，表单提交是通过点击提交按钮触发的，这是一个典型的事件处理过程。当用户点击提交按钮时，会触发一个事件，这个事件会调用一个函数。在这个函数...
JavaScript阻止表单提交是网页开发中常见的需求，主要用于在用户提交数据前进行验证或处理，以确保数据的有效性和安全性。本文将详细介绍两种阻止表单提交的方法，并解释`onSubmit`和`check()`的区别。 ### 第一种...
比如，当用户填写表单并点击提交时，JavaScript会捕获这个事件，阻止默认的表单提交行为，然后发送一个Ajax请求到服务器。这个请求通常通过JSON格式传输数据，服务器端的Action方法处理这些数据，完成后返回JSON或...
第一种：用flag标识，下面的代码设置... //当表单被提交过一次后checkSubmitFlg将变为true,根据判断将无法进行提交。 } checkSubmitFlg ==true; return true; } < /script > < form name=”form1” method=”pos
在实际开发中，还可以考虑结合其他表单验证技术，如使用`event.preventDefault()`方法阻止表单提交，或者在提交之前执行自定义的验证逻辑。此外，为了提供更好的用户体验，开发者还可以通过添加提示信息告知用户这一...
如果`repeatSubmitFlag`为`true`，则提示用户禁止重复提交并阻止表单提交；否则，将`repeatSubmitFlag`设置为`true`，允许表单正常提交。以下是实现代码示例： ```html <script language="javascript"> <!-- 定义...
首先，jQuery弹窗通常通过两种方式实现：一种是使用插件，如jQuery UI的Dialog组件；另一种是自定义CSS和JavaScript代码。在这个项目中，可能是第二种方法，因为没有提及特定的插件。创建弹窗需要设置HTML结构，通常...
使用JS和JQuery 阻止表单提交的两种方法 <html> <head> <meta http-equiv=Content-Type content=text/html; charset=gbk> <title>JavaScript禁止提交表单</title> [removed] ...
表单提交和submit按钮提交是Web开发中常见的两种数据提交方式。虽然它们都能够将表单数据从客户端发送到服务器，但具体实现和行为上存在一些差异，尤其是在使用JavaScript进行操作时。接下来将详细分析这两种提交...
本文将介绍服务器端和客户端两种解决方案。 服务器端解决方法 服务器端解决方法是通过在 Session 中生成一个唯一的标志 ID 来防止表单重复提交。该方法的优点是判断准确，兼容性最大。 具体实现步骤如下： 1.0 ...
表单提交长度限制可以通过前端和后端两种方式进行实现： - **前端实现**：主要依靠JavaScript来实现对用户输入数据长度的验证。这种方法可以在用户提交表单之前就完成数据长度的检查，及时给予用户反馈，提高用户...
总的来说，阻止表单提交按钮多次提交的方法主要有两种：一是通过JavaScript或jQuery在用户点击后禁用按钮；二是监听表单的`submit`事件并在提交时禁用按钮。同时，结合服务器端的验证能提供更全面的保护。这些方法的...
例如，可以使用`event.preventDefault()`阻止默认的表单提交行为，直到所有验证通过。 `input验证`是针对HTML5中的`<input>`元素的，它引入了一些内置的验证属性，如`required`（强制输入非空）、`pattern`（指定...
如果验证失败，则会弹出错误提示，并阻止表单提交；如果验证成功，则会弹出成功的提示信息。 #### 二、使用jQuery简化表单验证 虽然纯JavaScript可以满足基本需求，但在实际项目中使用jQuery等前端框架能够极大地...
这两种方法分别根据元素的 ID 或名称选择器来获取 DOM 元素。一旦获取到了这些元素，就可以通过 `.value` 属性读取其内容。 #### 4. 示例解析 在提供的示例代码中，可以看到一个简单的登录表单： ```html ...
1. **一次性提交**：通过设置一个变量`isCommit`，在首次提交时将其设为`true`，后续的提交检查到此变量已变为`true`，则阻止表单再次提交。这种方式简单易行，但缺点是如果用户禁用了JavaScript或使用其他方式绕过...