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 10 Javascript
javascript中最常用的继承模式 组合继承
Aug 12 Javascript
一起来写段JS drag拖动代码
Dec 09 Javascript
用jquery实现的一个超级简单的下拉菜单
May 18 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
canvas实现动态小球重叠效果
Feb 06 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
详解.vue文件解析的实现
Jun 11 Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
Jun 27 Javascript
JS实现鼠标移动拖尾
Dec 27 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
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
php 日期时间处理函数小结
2009/12/18 PHP
php之Memcache学习笔记
2013/06/17 PHP
PHP彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
PHP检测用户是否关闭浏览器的方法
2016/02/14 PHP
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
nodejs获取本机内网和外网ip地址的实现代码
2014/06/01 NodeJs
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
JavaScript对Json的增删改属性详解
2016/06/02 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
js转换对象为xml
2017/02/17 Javascript
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
python批量修改文件名的实现代码
2014/09/01 Python
Python实现通讯录功能
2018/02/22 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
CSS3 简写animation
2012/05/10 HTML / CSS
创业计划实施的7大步骤
2014/02/05 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
法语专业求职信
2014/07/20 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
2019新员工心得体会
2019/06/25 职场文书
创业计划书之甜品店
2019/09/18 职场文书
详解在OpenCV中如何使用图像像素
2022/03/03 Python
element tree树形组件回显数据问题解决
2022/08/14 Javascript