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 相关文章推荐
很全的显示阴历(农历)日期的js代码
Jan 01 Javascript
网页禁用右键实现代码(JavaScript代码)
Oct 29 Javascript
JS时间选择器 兼容IE6,7,8,9
Jun 26 Javascript
document.write()及其输出内容的样式、位置控制
Aug 12 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
Sep 29 Javascript
JavaScript返回上一页的三种方法及区别介绍
Jul 04 Javascript
基于jquery css3实现点击动画弹出表单源码特效
Aug 31 Javascript
简单谈谈Javascript中类型的判断
Oct 19 Javascript
javascript实现图片轮播效果
Jan 20 Javascript
js 定位到某个锚点的方法
Nov 19 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
Nov 20 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
Sep 12 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 n个不重复的随机数生成代码
2009/06/23 PHP
PHP和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
php程序的国际化实现方法(利用gettext)
2011/08/14 PHP
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
使用js操作cookie的一点小收获分享
2013/09/03 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
快速解决js开发下拉框中blur与click冲突
2016/10/10 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
2017/12/29 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
详解Django通用视图中的函数包装
2015/07/21 Python
Python简易版图书管理系统
2019/08/12 Python
Python实现FLV视频拼接功能
2020/01/21 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
2020/05/25 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
利用css3如何设置没有上下边的列表间隔线
2017/07/03 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
2018/06/20 HTML / CSS
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
音乐表演专业毕业生求职信
2013/10/14 职场文书
绩效专员岗位职责
2013/12/02 职场文书
市场营销专业个人求职信范文
2013/12/14 职场文书
自我鉴定三原则
2014/01/13 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
住宿生擅自离校检讨书
2014/09/22 职场文书
企业年检委托书范本
2014/10/14 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
2016高考寄语或鼓励的话语
2015/12/04 职场文书