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 相关文章推荐
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
Mar 04 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
详解服务端预渲染之Nuxt(介绍篇)
Apr 07 Javascript
Layui tree 下拉菜单树的实例代码
Sep 21 Javascript
javascript json对象小技巧之键名作为变量用法分析
Nov 11 Javascript
Vue 实现登录界面验证码功能
Jan 03 Javascript
openlayers实现地图弹窗
Sep 25 Javascript
Vue h函数的使用详解
Feb 18 Vue.js
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截取字符串长度函数
2015/10/29 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
php实现网页端验证码功能
2017/07/11 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
破解Session cookie的方法
2006/07/28 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
js实现仿阿里巴巴城市选择框效果实例
2015/06/24 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
js实现简单计算器
2015/11/22 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
基于复选框demo(分享)
2017/09/27 Javascript
React SSR样式及SEO的实践
2018/10/22 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
2019/01/09 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
Vue组件基础用法详解
2020/02/05 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
[01:00:17]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第二场 1月25日
2021/03/11 DOTA
学习python处理python编码问题
2011/03/13 Python
Python的词法分析与语法分析
2013/05/18 Python
python 以16进制打印输出的方法
2018/07/09 Python
Python双向循环链表实现方法分析
2018/07/30 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
Python 普通最小二乘法(OLS)进行多项式拟合的方法
2018/12/29 Python
python如何处理程序无法打开
2020/06/16 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
北京某科技有限公司C# .net笔试题
2014/09/27 面试题