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新手语法小结
Jun 15 Javascript
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
JavaScript汉诺塔问题解决方法
Apr 21 Javascript
有关Promises异步问题详解
Nov 13 Javascript
jQuery.uploadify文件上传组件实例讲解
Sep 23 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
Nov 21 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
Nov 24 Javascript
JS制作类似选项卡切换的年历
Dec 03 Javascript
js实现文字选中分享功能
Jan 25 Javascript
基于原生js实现判断元素是否有指定class名
Jul 11 Javascript
Vue项目打包编译优化方案
Sep 16 Javascript
mapboxgl实现带箭头轨迹线的代码
Jan 04 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
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
div失去焦点事件实现思路
2014/04/22 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
jquery编写日期选择器
2017/03/16 Javascript
Angular中$broadcast和$emit的使用方法详解
2017/05/22 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
jQuery初级教程之网站品牌列表效果
2017/08/02 jQuery
webpack+vue-cli项目中引入外部非模块格式js的方法
2018/09/28 Javascript
vue+SSM实现验证码功能
2018/12/07 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
2019/04/30 Javascript
Python学习笔记(二)基础语法
2014/06/06 Python
Python获取网页上图片下载地址的方法
2015/03/11 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
啥是佩奇?使用Python自动绘画小猪佩奇的代码实例
2019/02/20 Python
解决Django layui {{}}冲突的问题
2019/08/29 Python
Django之路由层的实现
2019/09/09 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
英国最受欢迎的母婴精品品牌:JoJo Maman BéBé
2021/02/17 全球购物
大学学习生活感言
2014/01/18 职场文书
应届大专毕业生自我鉴定
2014/04/08 职场文书
小学生放飞梦想演讲稿
2014/08/26 职场文书
2014年度党员自我评议
2014/09/13 职场文书
任长霞观后感
2015/06/16 职场文书
利用Python第三方库实现预测NBA比赛结果
2021/06/21 Python
MYSQL 表的全面总结
2021/11/11 MySQL