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 相关文章推荐
最简单的jQuery程序 入门者学习
Jul 09 Javascript
JS仿flash上传头像效果实现代码
Jul 18 Javascript
jquery图片切换插件
Mar 16 Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
Javascript6中字符串的四个新用法分享
Sep 11 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
Mar 09 Javascript
vue如何判断dom的class
Apr 26 Javascript
jquery.pager.js实现分页效果
Jul 29 jQuery
js实现上传图片并显示图片名称
Dec 18 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
解析link_mysql的php版
2013/06/30 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
JavaScript打字小游戏代码
2011/12/26 Javascript
jquery div 居中技巧应用介绍
2012/11/24 Javascript
基于jquery插件实现常见的幻灯片效果
2013/11/01 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
jQuery实现的无限级下拉菜单功能示例
2016/09/12 Javascript
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
JS运动特效之同时运动实现方法分析
2018/01/24 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
解决Vue router-link绑定事件不生效的问题
2020/07/22 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
[01:31]完美与DOTA2历程
2014/07/31 DOTA
Python 初始化多维数组代码
2008/09/06 Python
python基于queue和threading实现多线程下载实例
2014/10/08 Python
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
Python编程实现正则删除命令功能
2017/08/30 Python
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
职工运动会感言
2014/02/07 职场文书
小学语文课后反思精选
2014/04/25 职场文书
师德模范事迹材料
2014/06/03 职场文书
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android
Mysql忘记密码解决方法
2022/02/12 MySQL
Golang 字符串的常见操作
2022/04/19 Golang