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 要点归纳(三) jQuery中的事件和动画(下:动画篇)
Mar 24 Javascript
iframe的onreadystatechange事件在firefox下的使用
Apr 16 Javascript
JSONP之我见
Mar 24 Javascript
jquery实现页面虚拟键盘特效
Aug 08 Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 Javascript
Javascript之Date对象详解
Jun 07 Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 Javascript
原生JS实现的雪花飘落动画效果
May 03 Javascript
小程序自定义组件实现城市选择功能
Jul 18 Javascript
微信小程序 下拉刷新及上拉加载原理解析
Nov 06 Javascript
基于JavaScript实现留言板功能
Mar 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
ThinkPHP采用模块和操作分析
2011/04/18 PHP
php实现常见图片格式的水印和缩略图制作(面向对象)
2016/06/15 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
在模板页面的js使用办法
2010/04/01 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
关于js datetime的那点事
2011/11/15 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
2013/02/05 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
JQuery实现鼠标滚轮滑动到页面节点
2015/07/28 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
jquery心形点赞关注效果的简单实现
2016/11/14 Javascript
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
JS中的BOM应用
2018/02/02 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
2019/09/20 Javascript
python直接访问私有属性的简单方法
2016/07/25 Python
python使用KNN算法手写体识别
2018/02/01 Python
python读取和保存图片5种方法对比
2018/09/12 Python
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
德国汽车零件和汽车配件网上商店:kfzteile24
2018/11/14 全球购物
AURALog面试题软件测试方面
2013/10/22 面试题
What is EJB
2016/07/22 面试题
童装店创业计划书
2014/01/09 职场文书
办公室综合文员岗位职责范本
2014/02/13 职场文书
租赁意向书范本
2014/04/01 职场文书
刑事辩护词范文
2015/05/21 职场文书
礼貌问候语大全
2015/11/10 职场文书
MongoDB支持的数据类型
2022/04/11 MongoDB