onsubmit阻止表单提交
在实际开发中往往会遇到检查表单数据的合法性，如果数据不合法，就不让其提交。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 提交表单验证</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<script language="javascript">
//--->
function checksubmit()
{
// var input_data = $("#form1").serialize();
var data_arr = $("#form1").serializeArray();
$.each(data_arr, function(i, val){
// alert(val); //返回对象
// alert(i);
// alert(val.name); // 返回数组元素名字
// alert(val.value); // 返回数组元素的值
if(val.name == "email")
{
if(val.value == "")
{
alert("邮件不能为空！");
$("#email").focus();
return false;
}
}
if(val.name == "password")
{
if(val.value == "")
{
alert("PWD不能为空！");
$("#pwd").focus();
return false;
}
}
});
return false;
}
//--->
</script>
<body>
<br/>
<br/>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<form class="form-horizontal" role="form" id="form1" method="post" action="#" onsubmit="return checksubmit()">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" name="email" class="form-control" id="email" />
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" name="password" class="form-control" id="pwd" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox" />Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>代码很简单。
注意以下几点：
1.<form onsubmit="return false">
其中，将false换成一个检验输入是否合法的函数，该函数返回false或true，则可以在函数返回false的时候阻止表单提交。
2.onsubmit="return checksubmit()" 这里的return不能省掉。
3.checksubmit()函数里面的return true;可以省去，因为默认是返回true;
一个简单的测试页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取用户Token</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<script language="javascript">
//--->
function checksubmit() {
// var input_data = $("#form1").serialize();
var user_id = $("#name").val();
if(user_id < 1){
alert("用户ID不能为空！");
$("#name").focus();
return false;
}
}
</script>
<h1>获取TOKEN</h1>
<body style="margin:60px;">
<form role="form" method="get" action="get_app_user_token.php" onsubmit="return checksubmit()">
<div class="form-group">
<label for="name">用户ID</label>
<input type="text" class="form-control" name="user_id" id="name"
placeholder="请输入用户ID">
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
<?php
$user_id = (int)$_GET['user_id'];
if($user_id > 0)
{
$sql = "select * from user_tbl where user_id = {$user_id} limit 0,10";
$ret = db_query($sql);
if(empty($ret))
{
dump('没有该用户的设备Token记录！');
}else
{
dump($ret);
}
}
?>
</body>
</html>
onsubmit阻止表单提交的更多相关文章
- JQuery阻止表单提交的方法总结 - 使用onsubmit()验证表单并阻止非法提交
方法1:<form onsubmit="javascript:confirm()"> 方法内返回false阻止表单提交 示例:代码检测textarea内填写的长度,未填 ...
- JavaScript控制阻止表单提交
1.在表单上使用onSubmit方法 <?php $form = ActiveForm::begin([ 'options'=>[ 'class' => 'form-horizont ...
- js阻止表单提交
<!DOCTYPE html><html><head> <title>Simple Login Form</title> < ...
- jsp——js事件修改属性样式的两种方法（直接赋值、修改属性）、验证表单符合某要求、阻止表单提交、告诉浏览器不要缓存
代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncodi ...
- 利用JS 阻止表单提交
情景一:不存在Ajax异步操作 1 使用背景:会议室预定管理系统中,当表单提交的时候需要验证预约的时间是否符合预定规则(不需要通过访问服务器),否则提示错误信息,阻止表单提交. 2 相关技术点: fo ...
- Jquery添加元素append及阻止表单提交submit
HTML代码: <td><input name="duration[]" value="" type="text" /&g ...
- form表单验证失败，阻止表单提交
form表单验证失败,阻止表单提交 效果演示: 贴上完整代码: <!DOCTYPE html> <html lang="en"> <head> ...
- Javascript阻止表单提交
Javascript阻止表单提交 Html 1.<form name="loginForm" action="login.aspx" method=&qu ...
- form的onsubmit事件--表单提交前的验证最佳实现方式
今天遇到了一个问题,页面中include了很多的公共页面(都是没有form的),并且里面好多的地方都是自行提交的(页面中加入一个type=“submit”域,然后js中写入sumbit.click来执 ...
随机推荐
- 哈工大 信息安全 实验 Snort与单台防火墙联动实验
XX大学XX学院 <网络攻击与防御> 实验报告 实验报告撰写要求 实验操作是教学过程中理论联系实际的重要环节,而实验报告的撰写又是知识系统化的吸收和升华过程,因此,实验报告应该体现完整性. ...
- SVN库文件上传操作步骤
SVN库文件上传步骤: 1,sv st 或 svn status 查看本地库与远程库的差别(M代表文件有修改,?代表目录中有文件本地新增加) 2,根据1步骤中的查看结果:svn diff 差异文 ...
- 十进制数转IEE754单精度浮点数以及浮点数转换的python实现
十进制数转IEE754单精度浮点数 理解题目 单精度浮点数:单精度浮点数是用来表示带有小数部分的实数,一般用于科学计算.占用4个字节(32位)存储空间,包括符号位1位,阶码8位,尾数23位.其数值范围 ...
- LINUX安装 RPM与YUM
1 Linux软件安装概述 安装程序的方式: 通用二进制格式:直接解压压缩文件,就可以使用.但一定要注意安装平台. 软件包管理器:如RPM. 软件包管理器的前端工具:如YUM. 源代码编译. 1 1. ...
- boxcox1p归一化+pipeline+StackingCVRegressor
找到最好的那个参数lmbda. from mlxtend.regressor import StackingCVRegressor from sklearn.datasets import load_ ...
- 面试官：Redis集群有哪些方式，Leader选举又是什么原理呢？
哈喽!大家好,我是小奇,一位不靠谱的程序员 小奇打算以轻松幽默的对话方式来分享一些技术,如果你觉得通过小奇的文章学到了东西,那就给小奇一个赞吧 文章持续更新 一.前言 作为一名Java程序员,Redi ...
- SpringCloud微服务之Ribbon负载均衡（一）
什么是微服务?什么是SpringCloud? 微服务是一种架构的模式,它提倡将一个应用程序划分成很多个微小的服务,服务与服务之间相互协调.相互配合.每个服务运行都是一个独立的进程,服务与服务之间采用轻 ...
- 《手把手教你》系列基础篇（七十八）-java+ selenium自动化测试-框架设计基础-TestNG依赖测试- 中篇（详解教程）
1.简介 上一篇讲解了依赖测试的各种方法,今天继续讲解依赖测试的方法,这一篇主要是讲解和分享通过xml文件配置组名依赖方法( 主要是测试组的用法).废话不说,直接上干货. 2.实例 测试组:一个组可包 ...
- 女朋友问我深浅copy到底是什么？
深浅拷贝 列表存放值的时候,是先申请一块内存空间,存放索引和内存地址的对应关系,其实通俗的来说列表内不存真正的值,是一种间接存放的对应关系: 列表内存不可变类型的数据 就比如说,如果现在将L列表索引0 ...
- C++ struct结构体内存对齐
•小试牛刀 我们自定义两个结构体 A 和 B: struct A { char c1; char c2; int i; double d; }; struct B { char c1; int i; ...