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实现一些常用软件的下载导航
Aug 03 Javascript
有道JavaScript监听浏览器的问题
Jun 23 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 Javascript
Bootstrap 粘页脚效果
Mar 28 Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 Javascript
Vue修改mint-ui默认样式的方法
Feb 03 Javascript
Angular2.0实现modal对话框的方法示例
Feb 18 Javascript
Vue.js进阶知识点总结
Apr 01 Javascript
JS绘图Flot如何实现可选显示曲线图功能
Oct 16 Javascript
vant 中van-list的用法说明
Nov 11 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
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
PHP SESSION的增加、删除、修改、查看操作
2015/03/20 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
js 判断 enter 事件
2009/02/12 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
jQuery dialog 异步调用ashx,webservice数据的代码
2010/08/03 Javascript
js 第二代身份证号码的验证机制代码
2011/05/12 Javascript
使用apply方法处理数组的三个技巧[译]
2012/09/20 Javascript
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
使用jQuery实现返回顶部
2015/01/26 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
javascript中对Date类型的常用操作小结
2016/05/19 Javascript
bootstrap导航、选项卡实现代码
2016/12/28 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
[51:11]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS DT
2014/05/22 DOTA
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
django使用html模板减少代码代码解析
2017/12/12 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
美国高街时尚品牌:OASAP
2016/07/24 全球购物
高中军训感言1000字
2014/03/01 职场文书
奥巴马当选演讲稿
2014/09/10 职场文书
评先进个人材料
2014/12/29 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
大学班干部竞选稿
2015/11/20 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书