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 JSON的解析方式
Jul 25 Javascript
Tips 带三角可关闭的文字提示
Oct 06 Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 Javascript
详解JavaScript函数
Dec 01 Javascript
BootStrap3中模态对话框的使用
Jan 06 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
javascript中this的用法实践分析
Jul 29 Javascript
使用typescript构建Vue应用的实现
Aug 26 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
May 01 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
颠覆常识!无色透明的咖啡诞生了(中日双语)
2021/03/03 咖啡文化
Yii2实现多域名跨域同步登录退出
2017/02/04 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
用JS写的一个TableView控件代码
2010/01/23 Javascript
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
分页栏的web标准实现
2011/11/01 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
2013/05/11 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
jQuery中ajax的post()方法用法实例
2014/12/26 Javascript
JS动态修改iframe内嵌网页地址的方法
2015/04/01 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
详解jQuery中关于Ajax的几个常用的函数
2017/07/17 jQuery
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
IE9 elementUI文件上传的问题解决
2018/10/17 Javascript
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
python和shell变量互相传递的几种方法
2013/11/20 Python
深入解析Python中的__builtins__内建对象
2016/06/21 Python
Python中装饰器学习总结
2018/02/10 Python
opencv python 基于KNN的手写体识别的实例
2018/08/03 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
Python之多进程与多线程的使用
2021/02/23 Python
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
房地产营销策划方案
2014/02/08 职场文书
教师专业自荐书范文
2014/02/10 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android