js form表单onsubmit事件用法详解

onsubmit事件是当表单提交时进行相关js操作的一个事件。（但是有疑问）

onsubmit 事件会在表单中的确认按钮被点击时发生。当该事件触发的函数中返回false时，表单就不会被提交。

请看下面实例：

<script>
function submitFun(){alert("111");
}
</script>
<form onsubmit="submitFun();">
<input type="text" name="category" />
<input type="submit" name="submit" value="提交"/>
</form>

上面实例中，当"提交"按钮被点击时，会触发表单的onsubmit事件，此时函数submitFun()被执行（弹出111）并且表单数据也随之提交到服务器。

onsubmit经常用于表单验证。请看下面实例。

// 校验确认密码:

var repassword =document.getElementById("repassword").value;

if(repassword !=password){

alert("两次密码输入不一致!");

return false;

加this用obj直接获取输入框值和上面有什么不同为什么可以直接获取

<script>
function submitFun(obj){if(obj.category.value==''){alert("请输入");return false;}
}
</script>
<form onsubmit="return submitFun(this);">
<input type="text" name="category" />
<input type="submit" name="submit" value="提交"/>
</form>

当"提交"按钮被点击时，依然会执行submitFun()函数，在submitFun()函数中，我们对表单输入框进行了空验证，如果为空，提示输入并return false,这样表单就不会提交（上面已经说到：当该事件触发的函数中返回false时，表单就不会被提交）。同时，这里要注意οnsubmit="return submitFun(this);"，不能掉了return，否则表单永远会提交。

本文章中的代码可以复制到这里进行运行，你不妨试一下。

js form表单onsubmit事件用法详解相关推荐

【onsubmit】Form表单onsubmit事件用法详解
表单提交数据时,我们有时会用到onsubmit事件,那么onsubmit事件到底是干什么用的,在什么时候触发onsubmit事件以及如何使用onsubmit.本文章将向大家详细讲解onsubmit事件 ...
a链接易混淆与form表单简易验证用法详解
链接可以说遍布互联网,比如你想提供一个可以跳转到百度首页的链接给网友,那么代码如下: <a href="http://www.baidu.com">百度一下,你就知道& ...
layui单选框verify_layui lay-verify form表单自定义验证规则详解
虽然layui的官方文档已经是写的比较详细,但是初次使用的时候总会懵一下,这里纪录一下lay-verify自定义验证规则的时候到底放哪. html: 提交 js: form.verify({ //数组 ...
Jquery表单插件ajaxForm用法详解
原文地址: http://www.open-open.com/lib/view/open1325032463827.html 插件主要的方法: ajaxForm ajaxSubmit formToAr ...
Ext表单之loadRecord用法详解
[img]http://lovebeyond.iteye.com/upload/attachment/133355/c4778cd0-762d-3d20-b310-a186a61702ee.jpg[/ ...
JavaScript基础（九）form表单、事件、3D
form表单.事件.3D form表单 form表单操作 event事件对象案例事件冒泡事件的绑定与解绑键盘事件默认事件面试题选项卡 javascript实现 jQuery实现 3D 3 ...
php表单提交到数据库详解
一般朋友们逛一些网站的时候,想使用网站或者看到更多网站里的内容,网站会要求用户进行新用户的注册,网站会把新用户的注册信息存入数据库中,需要的时候再进行提取. 这样网站就会首先创建自己的数据库和对应的表 ...
js——form表单验证
用js实现一个简易的表单验证效果: 代码: <html><head><title>js校验form表单</title><meta charset ...
Element Ui使用技巧——Form表单的校验规则rules详细说明；element的 form 表单rules详细用法
本文章是在项目开发时遇到问题看到的一片好文, 摘录自[博客园]–[逍遥云天]. 感谢作者地址 – https://www.cnblogs.com/xyyt/p/13366812.html 在 [逍遥 ...

js form表单onsubmit事件用法详解

js form表单onsubmit事件用法详解相关推荐

最新文章

热门文章