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异步循环获取功能实现代码
Sep 19 Javascript
javascript取消文本选定的实现代码
Nov 14 Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
three.js快速入门【推荐】
Jan 21 Javascript
关于Vue Webpack2单元测试示例详解
Aug 14 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
vue2.0移动端滑动事件vue-touch的实例代码
Nov 27 Javascript
webpack常用构建优化策略小结
Nov 21 Javascript
vue常用高阶函数及综合实例
Feb 25 Vue.js
javascript对象3个属性特征
Nov 17 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
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
使用php伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
jQuery实现div跟随鼠标移动
2020/08/20 jQuery
Angular2 组件交互实例详解
2017/08/24 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
详解微信小程序之一键复制到剪切板
2019/04/24 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
vue表单验证之禁止input输入框输入空格
2020/12/03 Vue.js
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
Python实现去除代码前行号的方法
2015/03/10 Python
python获得一个月有多少天的方法
2015/06/04 Python
python3大文件解压和基本操作
2017/12/15 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
PyTorch学习:动态图和静态图的例子
2020/01/06 Python
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
汽车专业大学生职业生涯规划范文
2014/01/07 职场文书
婚前协议书
2014/04/15 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
个人债务授权委托书范本
2014/10/05 职场文书
幼儿园综治宣传月活动总结
2015/05/07 职场文书
国情备忘录观后感
2015/06/04 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS
详解Python魔法方法之描述符类
2021/05/26 Python
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫
MySQL transaction事务安全示例讲解
2022/06/21 MySQL