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 纠正 cleanWhitespace函数
Mar 11 Javascript
Javascript实现的类似Google的Div拖动效果代码
Aug 09 Javascript
js操作cookie保存浏览记录的方法
Dec 25 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
JS代码实现根据时间变换页面背景效果
Jun 16 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
在React 组件中使用Echarts的示例代码
Nov 08 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
Nov 10 Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 Javascript
JavaScript中的惰性载入函数及优势
Feb 18 Javascript
JS实现可控制的进度条
Mar 25 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
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线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
php实现12306余票查询、价格查询示例
2014/04/17 PHP
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
给ECShop添加最新评论
2015/01/07 PHP
mysql desc(DESCRIBE)命令实例讲解
2016/09/24 PHP
PHP正则替换函数preg_replace()报错:Notice Use of undefined constant的解决方法分析
2017/02/04 PHP
五个jQuery图片画廊插件 推荐
2011/05/12 Javascript
javascript之bind使用介绍
2011/10/09 Javascript
js动态添加删除,后台取数据(示例代码)
2013/11/25 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
原生js轮播(仿慕课网)
2017/02/15 Javascript
Angular 2.0+ 的数据绑定的实现示例
2017/08/09 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
JavaScript和TypeScript中的void的具体使用
2019/09/12 Javascript
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python编程argparse入门浅析
2018/02/07 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
通过cmd进入python的实例操作
2019/06/26 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
Python实现一个论文下载器的过程
2021/01/18 Python
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
《乡愁》教学反思
2014/02/18 职场文书
公益广告宣传方案
2014/02/28 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
2015年个人思想总结
2015/03/09 职场文书
健康证明
2015/06/19 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
爱国之歌(8首)
2019/09/29 职场文书
CSS实现单选折叠菜单功能
2021/11/01 HTML / CSS
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技