JavaScript阻止表单提交方法(附代码)
<body> <form action="clock.html" method="post" onsubmit="return checkLength()"> <p>name:<input type="text" name="user" id="user"></p> <input type="submit" id="submit" name="submit"> </form> </body> </html>
html页面。
第一种方法:利用event的阻止默认事件机制,页面载入之后获得submit元素,然后为submit注册click响应函数,参数为event事件。
在用户点击submit触发响应函数后,直接event.preventDefault();阻止表单转跳的默认事件。
第二种方法:在表单form标签下属性onsubmit="return checkLength()" 或 id="submit"的input标签下添加属性 checkLength()"
function 函数中 阻止 form提交 return false;
阻止 函数中代码向下执行 return;
以下还有
1.form的两个事件
submit
,提交表单,如果直接调用该函数,则直接提交表单
onSubmit
,提交按钮点击时先触发,然后触发submit事件。如果不加控制的话,默认返回true,因此表单总能提交。
2. JS的校验
通过在JS中用document.myform.name.value
,来得到用户的每一个输入 ,进行校验,当完全通过时,返回TRUE,反之返回false。
3. 页面代码实现
/* <form name="testform" action="hello.html" method="post" onSubmit="return check();"> <input type="text" name="name"> <input type="submit" value="提交"> </form> */
4. JS的实现
function check(){ if (document.testform.name.value=="admin") { alert("姓名不正确"); return false; } else{ return true; } }
注意
onSubmit的写法,千万不要写成:“check()”,这样当检验不能通过的时候不会提交表单。
好了以上就是小编为大家整理的js阻止表单提交的全部内容啦,希望对大家的学习能够有所帮助~
相关推荐
-
使用Ajax方法实现Form表单的提交及注意事项
写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说想要将控制权放在前端,通过js来操作页面的跳转或者数据变化. 一般这种异步的操作,我们都会想到ajax方式,因此在实现了功能后就整理了这篇文章,通过ajax方法实现form表单的提交并进行后续的异步操作. 常见的form表单提交方式 <!DOCTYPE HTML PUBLIC "-//W3C/
-
javascript下阻止表单重复提交、防刷新、防后退
1 服务器端的解决方法.这是我最为推荐的方法.优点是判断准确,兼容性最大. 做法:a页面显示表单,然后提交b页面处理,处理完后重定向到c页面显示结果. 1.0 在访问a页面时在session里生成一个标志ID,例如 //伪代码 session("submitID")=random() 然后把这个值写到表单的一个hidden的input里 //伪代码 <%response.write("<input name=submitID2 type=hidden val
-
onsubmit阻止form表单提交与onclick的相关操作
1. return 的返回值问题,函数中return一旦有返回值,就不在执行下面的语句,直接跳到函数调用的地方.如下PHP函数代码,第一个if条件符合则函数值返回布尔型false,可以返回一个函数的值,并且跳出这个函数:只要遇到return语句,程序就在那一行代码停止执行,执行控制将立刻返回到调用该程序的代码处.function 复制代码 代码如下: function chkinput(form) { if(form.title.value=="") { alert("请输入
-
JS去掉字符串前后空格、阻止表单提交的实现代码
$.trim(str) jQuery内部实现为: function trim(str){ return str.replace(/^(\s|\u00A0)+/,'').replace(/(\s|\u00A0)+$/,''); } 使用JS和JQuery 阻止表单提交的两种方法 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk">
-
阻止表单提交按钮多次提交的完美解决方法
如果表单是通过onsubmit进行Ajax提交,注意将表单提交按钮input type属性设为button,尽量不要设置为submit类型. 另外,在提交事件发出后,最好将提交按钮设置为disabled,防止由于网络延时问题,让用户有机会进行多次点击重复提交. onclick事件里面执行 $(this).attr('disabled','disabled'); 在点击一次后立马将按钮设置为不可使用. 或者向如下方法另行定义一个jQuery函数来进行控制: $("form").submi
-
用JavaScrip正则表达式验证form表单的方法
document:标签之间 location:url history:前进后退 <html> <head> <script type="text/javascript"> function show() { //弹出一个提示框 window.alert("hh"); } //将show方法绑定到按钮上 window.onload=function() { //定位到按钮 var buttonElement=document.for
-
利用JavaScript阻止表单提交的两种方法
在JavaScript中,阻止表单默认提交行为的方法有两种,分别是: (1) return false 示例代码 <form name="loginForm" action="login.aspx" method="post"> <button type="submit" value="Submit" id="submit">Submit</button&g
-
JavaScript阻止表单提交方法(附代码)
<body> <form action="clock.html" method="post" onsubmit="return checkLength()"> <p>name:<input type="text" name="user" id="user"></p> <input type="submit&quo
-
JavaScript判断表单提交时哪个radio按钮被选中的方法
本文实例讲述了JavaScript判断表单提交时哪个radio按钮被选中的方法.分享给大家供大家参考.具体分析如下: 这里的表单提交时通过JavaScript判断哪个radio按钮被选中了 <script type="text/javascript"> function findButton() { var myForm = document.forms.animalForm; var i; for(i=0;i<myForm.marsupial.length; i++
-
javascript实现表单提交后,提交按钮不可用的方法
本文实例讲述了javascript实现表单提交后,提交按钮不可用的方法.分享给大家供大家参考.具体如下: 这里使用javascript控制表单提交后,提交按钮不可用,可以防止用户多次提交. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>表单提交后按钮禁用</title> &l
-
JS两种类型的表单提交方法实例分析
本文实例分析了JS两种类型的表单提交方法.分享给大家供大家参考,具体如下: 1.原始的 <form method="post" action="/student/stureg/add" id="form1" onsubmit="return subForm();"> <button type="submit" class="button red" style="
-
HTML form表单提交方法案例详解
form表单提交方式总结一下: 一.利用submit按钮实现提交,当点击submit按钮时,触发onclick事件,由JavaScript里函数判断输入内容是否为空,如果为空,返回false, 不提交,如果不为空,提交到由action指定的地址. <script type="text/javascript"> function check(form) { if(form.userId.value=='') { alert("请输入用户帐号!"); for
-
AngularJS模仿Form表单提交的实现代码
废话不多说了,直接给大家贴代码了. $http({ url: "http://localhost:10086/yuanxin/Conference/ImportExcelDataForBusRoute", method: 'Post', headers: { 'Content-Type': 'multipart/form-data' }, data: { BusRoute: file, ConferenceID: "1" }, transformRequest: f
-
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
前言: 咋一看标题还挺长的呢,还有这么多功能,其实简化一点就是一个功能,异步表单提交,只是在异步表单提交这个大功能下,可以实现图片上传,模拟ajax技术(其实很早以前就是通过这个方式来实现多浏览器的兼容ajax,这里只是怀怀旧,作为一个技术来玩玩),下面的内容需要有一定的js基础,要不然理解起来会比较困难. 注意事项: 这是我bBank里面的一个方法,现在我把他提取出来成一个通用方法来讲解. bBank 框架介绍:http://www.cnblogs.com/bruceli/archive/20
随机推荐
- JS实现合并json对象的方法
- 在Ruby on Rails中优化ActiveRecord的方法
- 在VMWare上安装ubuntu及VMWare Tools详细教程
- javascript代码在ie8里报错 document.getElementById(...) 为空或不是对象的解决方法 原创
- PHP使用PDO连接ACCESS数据库
- php四种基础算法代码实例
- python常规方法实现数组的全排列
- Python中的闭包实例详解
- Windows下用py2exe将Python程序打包成exe程序的教程
- SQL 优化
- React Native 集成jpush-react-native的示例代码
- Python正则替换字符串函数re.sub用法示例
- C#/.Net 中快速批量给SQLite数据库插入测试数据
- 点评js异步加载的4种方式
- 一个简单的js渐显(fadeIn)渐隐(fadeOut)类
- javascript 层隐藏和显示的代码
- jQuery实现鼠标滑过图片移动特效
- JavaScript获取select中text值的方法
- Linux下Web网站压力测试工具Webbench使用教程
- 参考Dedecms整合Discuz完全攻略实现最新的结合