js如何阻止表单提交
时间:2017-11-17
我有一个提交按钮的表单。但是,我想以某种方式“抓住”提交事件并阻止表单提交。有什么办法可以做到这一点?我无法修改提交按钮,因为它是自定义控件的一部分。
与其他答案不同,使用false
只是答案的一部分。考虑在返回语句之前发生JS错误的场景...
HTML
<form onsubmit="return mySubmitFunction()">
...
</form>
脚本
function mySubmitFunction()
{
someBug()
return false;
}
在这里返回false
,表单将不会被提交,您还应该调用preventDefault
以阻止Ajax表单提交的默认表单操作。
function mySubmitFunction(evt) {
evt.preventDefault();
someBug();
return false;
}
在这种情况下,即使有错误,表单也不会提交!
或者,try...catch
可以使用一个块。
function mySubmit(evt) {
evt.preventDefault();
try {
someBug();
} catch (e) {
throw new Error(e.message);
}
return false;
}
js阻止表单提交默认行为的两种方式
有时候我们在表单进行提交前需要进行表单验证,如果验证不通过,那么就需要阻止表单提交的默认行为,下面介绍两种阻止此默认行为的方式。
1 第一种方式就是在按钮上绑定click事件,return false就会阻止默认行为,反之就进行默认行为。
<form action="http://www.baidu.com" method="post">
<!--<input type="submit" value="提交" onclick="return test()"/>-->
<input type="submit" value="提交"/>
</form>
function test(){
if(/*验证通过*/1){
return true;
}else{
return false;
}
}
2. 通过submit事件,通过调用event.preventDefault();方法来阻止默认行为。
$("form").on("submit",function(event){
if(/*验证通过*/1){
}else{
event.preventDefault();
//return false; 当然这里也可以返回false。
}
})
- golang继承,和多态
- python 利用random生成验证码与MD5码加密过程
- Java内部类的继承
- Java继承类中static成员函数的重写
- Search for a range寻找上下界-Leetcode
- Basic Calculator 基本计算器-Leetcode
- python yield函数深入浅出理解
- 十分钟搞定 Tensorflow 服务
- datapump跨平台升级迁移的总结 (r8笔记第77天)
- Java中isAssignableFrom()方法与instanceof()方法用法
- 与Ajax同样重要的jQuery(1)
- Java中Class类详解、用法及泛化
- python 函数编程的位置参数、默认参数、关键字参数以及函数的递归
- Java子类的父类和要实现的接口有相同的方法/函数会冲突吗
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 使用ABAP实现Mock测试工具Mockito
- 增强版本的自开发SAP WebClient UI Repository Information System
- 最大子序列和的问题的解(1)
- 10-STM32+ESP8266+AIR202远程升级方案-功能3-手机APP控制STM32远程更新固件程序,基于ESP8266
- 最大子序列和的接口函数(2)
- 最大子序列和的接口函数(3)
- 【剑指Offer】二叉树的深度
- 运行时间中的对数
- IIC协议
- 通过例子学习编写shell
- 【redis6.0.6】redis源码慢慢学,慢慢看 -- 第三天:MakeFile
- 继续学习Shell脚本(详细)
- 将linux终端的输出信息保存到log中
- UNIX网络编程卷1(第三版)一个简单的时间获取服务器的程序
- Python数据分析实战(3)Python实现数据可视化