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 相关文章推荐
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
juqery 学习之五 文档处理 插入
Feb 11 Javascript
浅析hasOwnProperty方法的应用
Nov 20 Javascript
JS保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
Oct 22 Javascript
js跨域请求数据的3种常用的方法
Dec 01 Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
vue动态路由配置及路由传参的方式
May 23 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
Jul 20 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 递归效率分析
2009/11/24 PHP
Ubuntu12下编译安装PHP5.3开发环境
2015/03/27 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
jquery操作select option 的代码小结
2011/06/21 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
JavaScript设计模式之策略模式实例
2014/10/10 Javascript
原生js实现日期联动
2015/01/12 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
2016/02/14 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
2017/02/14 Javascript
原生node.js案例--前后台交互
2017/02/20 Javascript
Python读取网页内容的方法
2015/07/30 Python
Python的条件语句与运算符优先级详解
2015/10/13 Python
python实现按任意键继续执行程序
2016/12/30 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
python re模块常见用法例举
2021/03/01 Python
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
eBay奥地利站:eBay.at
2019/07/24 全球购物
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
COSETTE官网:奢华,每天
2020/03/22 全球购物
总裁岗位职责
2013/12/04 职场文书
咖啡馆创业计划书
2014/01/26 职场文书
百年校庆节目主持词
2014/03/27 职场文书
保安公司服务承诺书
2014/05/28 职场文书
股东授权委托书
2014/10/15 职场文书
2014年学校教学工作总结
2014/12/06 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
关于五一放假的通知
2015/08/18 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书
输入框跟随文字内容适配宽实现示例
2022/08/14 Javascript