JavaScript阻止表单提交方法（附代码）
更新时间：2017年08月15日 10:06:35 作者：曦羽
这篇文章主要介绍了JavaScript阻止表单提交方法,通过代码示例讲解了阻止表单提交需要注意的事项，以及onSubmit和check（）的区别写法,需要的朋友可以参考下
<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阻止表单提交的全部内容啦，希望对大家的学习能够有所帮助~
相关文章
这篇文章主要介绍了uniapp如何使用 web-view 与网页互相通信,在APP中使用 this.$scope.$getAppWebview() 获取webview对象实例,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-07-07
很多时候为了显示格式，需要在某一字符串不满位的情况下进行前补0操作。下面这篇文章就给大家主要介绍了javascript添加前置0(补零)的几种方法,文中给出了详细的示例代码，需要的朋友可以参考借鉴，下面来一起看看吧。2017-01-01
这篇文章主要介绍了js文本框跑马灯效果，功能实现非常简单，推荐给大家，有需要的小伙伴可以参考下。2015-08-08
这篇文章主要介绍了ES6中Symbol、Set和Map用法,结合实例形式详细分析了ES6中Symbol、Set和Map的功能、使用方法及相关操作注意事项,需要的朋友可以参考下2019-08-08
在子窗口中关闭父窗口在某些特殊的情况下还是有存在的必要的，其实很简单，只需一句代码便可实现，感兴趣的朋友可以了解下2013-10-10
这篇文章主要介绍了JavaScript中的String对象常用方法,非常简单实用，有需要的小伙伴参考下2015-02-02
用DIV和DIV自身的滚动条相互控制内容的滚动，DIV自身的滚动条样式可以用DIV层覆盖，重写滚动条样式2013-06-06
这篇文章主要介绍了javascript实现小型区块链功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了微信小程序实现图片滚动效果,结合实例形式分析了微信小程序基于swiper组件的图片滚动效果相关实现技巧与操作注意事项,需要的朋友可以参考下2018-12-12
本文主要介绍了chart.js实现动态网页显示拆线图的效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-11-11
最新评论