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进行拖拽
Jul 20 Javascript
如何将JS的变量值传递给ASP变量
Dec 10 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
Sep 15 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
vue实现表格数据的增删改查
Jul 10 Javascript
Mongoose实现虚拟字段查询的方法详解
Aug 15 Javascript
vue axios 在页面切换时中断请求方法 ajax
Mar 05 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
vue数据响应式原理知识点总结
Feb 16 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和ACCESS写聊天室(八)
2006/10/09 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
2015/03/04 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
js窗口关闭提示信息(兼容IE和firefox)
2015/10/23 Javascript
JavaScript阻止回车提交表单的方法
2015/12/30 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
移动端手指操控左右滑动的菜单
2019/09/08 Javascript
进一步理解Python中的函数编程
2015/04/13 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
python numpy 部分排序 寻找最大的前几个数的方法
2018/06/27 Python
Python Socket编程之多线程聊天室
2018/07/28 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
浅谈python中频繁的print到底能浪费多长时间
2020/02/21 Python
什么是Python中的顺序表
2020/06/02 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
计算机专业自我鉴定
2013/10/15 职场文书
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
奥巴马演讲稿
2014/01/08 职场文书
法学专业毕业生自荐信
2014/06/11 职场文书
逃课检讨书
2015/01/26 职场文书
2015年教师节主持词
2015/07/03 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
DE1103使用报告
2022/04/05 无线电