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 相关文章推荐
如果文字过长,则将过长的部分变成省略号显示
Jun 26 Javascript
让你的网站可编辑的实现js代码
Oct 19 Javascript
js jquery数组介绍
Jul 15 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 Javascript
javascript的alert box在java中如何显示多行
May 18 Javascript
bootstrap常用组件之头部导航实现代码
Apr 20 Javascript
JS使用正则表达式验证身份证号码
Jun 23 Javascript
Vue 项目分环境打包的方法示例
Aug 03 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
详解Vue的watch中的immediate与watch是什么意思
Dec 30 Javascript
Vue自定义组件的四种方式示例详解
Feb 28 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中检查文件或目录是否存在的代码小结
2012/10/22 PHP
使用array mutisort 实现按某字段对数据排序
2013/06/18 PHP
PHP邮箱验证示例教程
2016/06/01 PHP
php实时倒计时功能实现方法详解
2017/02/27 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
javascript闭包入门示例
2014/04/30 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
2015/06/23 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
js运算符的一些特殊用法
2018/07/29 Javascript
深入浅出理解JavaScript闭包的功能与用法
2018/08/01 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
vue 实现小程序或商品秒杀倒计时
2019/04/14 Javascript
Vue实现页面添加水印功能
2019/11/09 Javascript
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
Python使用pymongo模块操作MongoDB的方法示例
2018/07/20 Python
django 外键model的互相读取方法
2018/12/15 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
python3中for循环踩过的坑记录
2020/12/14 Python
德国骆驼商店:ActiveFashionWorld
2017/11/18 全球购物
美国庭院家具购物网站:AlphaMarts
2019/04/10 全球购物
应届生服装设计自我评价
2013/09/20 职场文书
毕业生教师求职信
2013/10/20 职场文书
开展党的群众路线教育实践活动方案
2014/02/05 职场文书
护理专科自荐书范文
2014/02/18 职场文书
医院信息公开实施方案
2014/05/09 职场文书
经营理念标语
2014/06/21 职场文书
收银员岗位职责
2015/02/03 职场文书
2015年实习单位评语
2015/03/25 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书