JavaScript阻止表单提交方法(附代码)


Posted in Javascript onAugust 15, 2017
<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阻止表单提交的全部内容啦,希望对大家的学习能够有所帮助~

Javascript 相关文章推荐
JavaScript Event学习第五章 高级事件注册模型
Feb 07 Javascript
JavaScript中yield实用简洁实现方式
Jun 12 Javascript
用jQuery模拟select下拉框的简单示例代码
Jan 26 Javascript
chrome下img加载对height()的影响示例探讨
May 26 Javascript
解决checkbox的attr(checked)一直为undefined问题
Jun 16 Javascript
JavaScript中Math.SQRT2属性的使用详解
Jun 14 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
jQuery多级联动下拉插件chained用法示例
Aug 20 Javascript
Jquery 整理元素选取、常用方法一览表
Nov 26 Javascript
详解Angular的8个主要构造块
Jun 20 Javascript
解决layui动态添加的元素click等事件触发不了的问题
Sep 20 Javascript
jQuery DOM节点的遍历方法小结
Aug 15 #jQuery
Mongoose实现虚拟字段查询的方法详解
Aug 15 #Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 #Javascript
React应用中使用Bootstrap的方法
Aug 15 #Javascript
JavaScript函数中的this四种绑定形式
Aug 15 #Javascript
详解react使用react-bootstrap当轮子造车
Aug 15 #Javascript
JScript实现表格的简单操作
Aug 15 #Javascript
You might like
php中定义网站根目录的常用方法
2010/08/08 PHP
PHP number_format() 函数定义和用法
2012/06/01 PHP
一个不易被发现的PHP后门代码解析
2014/07/05 PHP
如何让CI框架支持service层
2014/10/29 PHP
利用php-cli和任务计划实现订单同步功能的方法
2017/05/03 PHP
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
js对象的构造和继承实现代码
2010/12/05 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
详解React项目如何修改打包地址(编译输出文件地址)
2019/03/21 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
vue实现评价星星功能
2020/06/30 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
js canvas实现五子棋小游戏
2021/01/22 Javascript
[48:02]Ti4循环赛第三日 VG vs Liquid和NEWBEE vs DK
2014/07/12 DOTA
Python中列表、字典、元组、集合数据结构整理
2014/11/20 Python
Atom的python插件和常用插件说明
2018/07/08 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
详解python的super()的作用和原理
2020/10/29 Python
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
中专毕业生自我鉴定范文
2013/11/09 职场文书
软件工程师岗位职责
2013/11/16 职场文书
2016国培研修心得体会
2016/01/08 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL