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 相关文章推荐
JS增加行复制行删除行的实现代码
Nov 09 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
使用phantomjs进行网页抓取的实现代码
Sep 29 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
Mar 13 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
jquery对dom节点的操作【推荐】
Apr 15 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
May 07 Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 Javascript
使用typescript改造koa开发框架的实现
Feb 04 Javascript
单线程JavaScript实现异步过程详解
May 19 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批量上传图片的具体实现方法介绍.
2014/02/26 PHP
理解php依赖注入和控制反转
2016/05/11 PHP
js Flash插入函数免激活代码
2009/03/31 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
2015/07/13 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
2016/05/28 Javascript
在localStorage中存储对象数组并读取的方法
2016/09/24 Javascript
详解webpack require.ensure与require AMD的区别
2017/12/13 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
vue-i18n结合Element-ui的配置方法
2019/05/20 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
python转换摩斯密码示例
2014/02/16 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
python tkinter组件使用详解
2019/09/16 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
Python gevent协程切换实现详解
2020/09/14 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
小学英语教学反思案例
2014/02/04 职场文书
地理信息科学专业推荐信
2014/09/08 职场文书
导游欢迎词范文
2015/01/23 职场文书
无罪辩护词范文
2015/05/21 职场文书
2016国培研修心得体会
2016/01/08 职场文书
社区结对共建协议书
2016/03/23 职场文书
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js