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来执 ...
随机推荐
- 正则表达式（三）——Java中的相关函数
1.前言 之前在学习Python时,我已经说过正则表达式的相关语法,这里不再赘述了,有需要可以参考: 2020.10.7 正则表达式(一) - ShineLe - 博客园 现在开始学习Java中的正则 ...
- python面试_总结01_概念和内置高阶函数
- 简答题 1.请谈谈Python中is 和 == 的区别(代码演示) is用于比较两个变量是否引用了同一个内存地址,is表示的是对象标识符(object identity),作用是用来检查对象的标识 ...
- 矩池云上使用Visdom可视化图像说明
租用机器添加默认端口 点击展开高级选项 点击添加端口配置 添加Visdom默认端口,选择 http 端口填入 8097 进入环境安装并使用 JupyterLab 链接 是本次实验用来安装实验的工具 H ...
- laravel 返回值
先理解几个概念: StdClass 对象 => 基础的对象 Eloquent 模型对象 (Model 对象) => 和模型相关的类对象 Eloquent 集合 => 可以简单理解为对 ...
- 详解java接口interface
引言 接口这个词在生活中我们并不陌生. 在中国大陆,我们可以将自己的家用电器的插头插到符合它插口的插座上: 我们在戴尔,惠普,联想,苹果等品牌电脑之间传输数据时,可以使用U盘进行传输. 插座的普适性是 ...
- HCIE数据挖掘笔记-005数据挖掘专业名词
数据对象和属性类别: 数据一般有噪声,数量庞大,且来自不同的数据源 数据集由数据对象组成,一个数据对象代表一个实体 数据对象:样本.实例.数据点.对象 数据对象以数据元组的形式存放在数据库中,数据库的 ...
- 宏参数(Arguments)的扩展
宏分为两种,一种是 object-like 宏,比如: #define STR "Hello, World!" 另一种是 function-like 宏,比如: #define M ...
- org.junit.platform.commons.JUnitException: TestEngine with ID 'junit-jupiter' failed to discover tests
https://blog.csdn.net/qq_43349162/article/details/115285780 https://blog.csdn.net/Think_and_work/art ...
- SignalR 入门 .netCore实现聊天室
SignalR 入门 .netCore实现聊天室 本文根据微软SignalR 简介 | Microsoft Docs 和 ASP.NET Core SignalR 简介 | Microsoft Doc ...
- python3求200以内能被17整除的最大正整数
for i in range(200, 17,-1): if(i%17==0): print(i) break