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 巧妙获取剪贴板数据 Excel数据的粘贴
Jul 09 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 Javascript
JQuery实现鼠标滑过显示导航下拉列表
Sep 12 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
Aug 10 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
Nov 22 Javascript
详解如何较好的使用js
Dec 16 Javascript
angular分页指令操作
Jan 09 Javascript
全面总结Javascript对数组对象的各种操作
Jan 22 Javascript
基于JavaScript实现数码时钟效果
Mar 30 Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 Javascript
分享JS表单验证源码(带错误提示及密码等级)
Jan 05 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 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
Session的工作方式
2006/10/09 PHP
默默小谈PHP&amp;MYSQL分页原理及实现
2007/01/02 PHP
php !function_exists(&quot;T7FC56270E7A70FA81A5935B72EACBE29&quot;))代码解密
2011/01/07 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
jQuery 白痴级入门教程
2009/11/11 Javascript
JQuery 动态扩展对象之另类视角
2010/05/25 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
2011/06/20 Javascript
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
JavaScript初学者必看“new”
2017/06/12 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
实用的 vue tags 创建缓存导航的过程实现
2020/12/03 Vue.js
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
Python实现包含min函数的栈
2016/04/29 Python
python 调用win32pai 操作cmd的方法
2017/05/28 Python
Python中的元组介绍
2019/01/28 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
酒店公关部经理岗位职责
2013/11/24 职场文书
新年主持词
2014/03/27 职场文书
《分一分》教学反思
2014/04/13 职场文书
大学英语演讲稿范文
2014/04/24 职场文书
求职信模板
2014/05/23 职场文书
教师考核评语大全
2014/12/31 职场文书
高三物理教学反思
2016/02/20 职场文书
Python一行代码实现自动发邮件功能
2021/05/30 Python