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 相关文章推荐
js 判断一个元素是否在页面中存在
Dec 27 Javascript
Jquery实现搜索框提示功能示例代码
Aug 13 Javascript
json格式的时间显示为正常年月日的方法
Sep 08 Javascript
Javascript的&amp;&amp;和||的另类用法
Jul 23 Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 Javascript
jquery实现简单的banner轮播效果【实例】
Mar 30 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
js省市区级联查询(插件版&amp;无插件版)
Mar 21 Javascript
webpack源码之loader机制详解
Apr 06 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
Jul 31 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 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
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
PHP实现蛇形矩阵,回环矩阵及数字螺旋矩阵的方法分析
2017/05/29 PHP
javascript 图片上传预览-兼容标准
2009/06/01 Javascript
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
javascript跨域刷新实现代码
2011/01/01 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
2012/02/07 Javascript
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
简介JavaScript中的unshift()方法的使用
2015/06/09 Javascript
jQuery实现图片文字淡入淡出效果
2015/12/21 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
2017/02/16 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
Vue 进阶教程之v-model详解
2017/05/06 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
JavaScript 判断对象中是否有某属性的常用方法
2018/06/14 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
JavaScript 作用域实例分析
2019/10/02 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
[01:01:23]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第一场 11.26
2020/11/30 DOTA
浅谈django中的认证与登录
2016/10/31 Python
python之DataFrame实现excel合并单元格
2021/02/22 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
Python机器学习工具scikit-learn的使用笔记
2021/01/28 Python
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
CHARLES & KEITH澳大利亚官网:新加坡时尚品牌
2019/01/22 全球购物
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
编写strcpy函数
2014/06/24 面试题
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
师德师风承诺书
2014/05/23 职场文书
安全环保演讲稿
2014/08/28 职场文书
党员“四风”问题批评与自我批评思想汇报
2014/10/06 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js
深入理解go slice结构
2021/09/15 Golang