onsubmit事件 原来是这么回事

最新推荐文章于 2022-11-12 23:33:35 发布
最新推荐文章于 2022-11-12 23:33:35 发布
阅读量1.6k 收藏 16
点赞数 2
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/banruo/archive/2010/03/10/1682942.html
版权

    今天做一个表单提交验证的工作，做到其中一段时，我想提交表单时，先验证是否填写了姓名，如果没填写，右侧显示出提示信息，并取消提交，如果已填写，则正常提交。

    初步想法，想自己写个js函数，在提交按钮处用onclick事件，判断填写了则用js提交表单，没填写则蹦出提示信息，但基本上实现了半天，达不到我想要的结果，最后才发现原来有onsubmit这个属性，它写在 form 标签里。

    现在说说onclick和onsubmit的区别：

    onSubmit是表单上(也只能是表单)用的,提交表单前会触发
    onClick是按钮等控件上用的,用来触发点击事件.

    用作数据验证的时候,可以选择在submit按钮上的onclick中验证,可以在onsubmit中验证.但是从事件触发顺序上来

    说,onclick更早.顺序是:

    用户点击按钮->onclick->如果onclick返回有效或未处理onclick则提交表单->onsubmit->如果onsubmit未处理或

    返回true,则提交,否则取消提交.
    onsubmit中返回false会引起取消表单提交;onclick中返回false则会引起此次点击操作被判断为无效,则也就不会引起

    表单提交.

转载于:https://www.cnblogs.com/banruo/archive/2010/03/10/1682942.html

weixin_30550081
关注
【尚硅谷 JavaWeb 笔记】onsubmit事件
qq_54110690的博客
02-27 512
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>onsubmit事件</title> <script type="text/javascript"> // 静态注册onsubmit事件 function onsubmitFunc() { // 要验证所.
onsubmit事件
qq_45361567的博客
10-17 312
onsubmit事件： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function onsubmitFun(){ //要验证所有表单项是否合法，如果有一个不合法，就阻
onsubmit 事件
weixin_30859423的博客
12-02 485
onsubmit 事件 Event 对象 定义和用法 onsubmit 事件会在表单中的确认按钮被点击时发生。 语法 onsubmit="SomeJavaScriptCode" 参数描述 SomeJavaScriptCode 必需。规定该事件发生时执行的 JavaScript。 支持该事件的 HTML 标签： <form&gt...
利用onsubmit事件实现表单提交前的验证
coca的博客
04-06 609
JS代码： function check(){ var name = document.getElementById("name").value; if(name == null || name == ''){ alert("用户名不能为空"); return false; } return true; } <form...
submit方法与onsubmit事件
最新发布
保持好奇
11-12 611
用这种方式绑定onsubmit事件，表单能否提交取决于onsubmit函数的返回值。false时，表单不会提交。经常我们的提交表单前都会用js对表单内容作验证，如果有问题，则不希望提单表单。可见，listener是没有返回值的（写了也不会认），因此我们的check函数的返回值是不起作用的。你会发现，IE下，可以正常阻止表单提单，但FF及chrome下表单正常提交了…//验证出错的情况just a demo。//验证出错的情况just a demo。//验证出错的情况just a demo。
表单元素的submit()方法和onsubmit事件应用概述
12-10
表单元素拥有submit方法，同时也具有onsubmit事件句柄，用于监听表单提交。可以使用elemForm.submit();方法触发表单提交。1、表单元素中出现了name=”submit”的元素这种情况下elemForm.submit();将不会触发表单提交...
Form表单的action和onSubmit示例介绍
09-28
Form表单具有多个属性和事件，其中action属性和onSubmit事件是两个非常重要的组成部分。 action属性是form表单的一个基本属性，它用来指定当表单提交后，所收集的信息将被发送到的服务器上的URL。在HTML5标准中，...
form的onsubmit事件--表单提交前的验证最佳实现方式
wanglei9876开发人生
05-07 1257
页面提交前验证的实现方式： form应该也有提交前的事件就是onsubmit。此事件的功能就是在表单提交前自动执行指定的东西。 需要注意的是，onsubmit=“return check()”中的return是一定要加上的，不然check的返回值哪怕是false，仍然提交。也就是说，onsubmit=“return false”为不执行提交；onsubmit=“return true”
onchange()、onsubmit()和onreset()
boat_sea的博客
04-30 1016
onchange()失去焦点内容改变事件代码如下： &lt;form name="change"&gt; &lt;input type="text" name="wenzi" value="零基础学JavaScript"&gt; &lt;select name="menu" onchange="changecolor()"&gt;
【onsubmit】Form表单onsubmit事件用法详解
热门推荐
YoungStar70的博客
03-22 4万+
表单提交数据时，我们有时会用到onsubmit事件，那么onsubmit事件到底是干什么用的，在什么时候触发onsubmit事件以及如何使用onsubmit。本文章将向大家详细讲解onsubmit事件的工作机制和使用方法。 function submitFun(){       alert("111"); } 上面实例中，当"提交"按钮被点击时，会触发表单的on
【js与jquery】html中onsubmit事件的用法
PHP在线开发笔记
09-03 1万+
onsubmit可以理解为一个函数的名称，而onsubmit等号右边的字符串可以理解为一个函数体，在web开发中，onsubmit函数要求必须有返回值：如果返回值为true，则代表允许提交表单；如果返回值为false，则代表不允许提交表单，如果你的表单提交有问题，则需要查看onsubmit=“” 等号右边引号中返回的值是false还是true 众所周知，在表单中加上onsubmit="ret
php中怎么用onsubmit防止,form onsubmit 里return阻止表单提交原理
weixin_36070998的博客
03-27 192
众所周知，在表单中加上οnsubmit="return false;"可以阻止表单提交。或者我们通过 onsubmit = "return mysubmit()"但是你知道为啥它能阻止表单提交吗？下面是简单的一小段代码：function submitTest() {// 一些逻辑判断return false;}大家判断像上面的写法，点击submit按钮该表单是否提交？若答案为是，就不用往下看了。若...
javascript函数和onsubmit用法讲解
tanchang7的专栏
03-24 448
javascript函数和onsubmit用法讲解 Html代码           &amp;lt;!--           function uploadFile(){               var cName=document.all.cName;               document.forms[0].action=&amp;quot;fileUpload.do?cName...
关于onsubmit事件return的使用
想到哪记到哪
04-26 1万+
onsubmit事件支持所有浏览器。         onsubmit事件支持且仅支持form标签。 按正常的理解来说，该事件是发生在submit事件触发，但是执行action之前这中间。但是它的使用上有一个小坑。         onsubmit="alert('xxx')"         onsubmit="true/false"         onsubmit="return
Vue事件绑定以及事件修饰符
XueDaJing030409的博客
06-04 355
事件 要理解事件绑定，就得先了解事件。 浏览器是事件驱动型的，根据用户的行为触发不同的事件，根据事件执行相应的操作。我们较为熟悉的事件有三大类型： 鼠标键盘事件 鼠标键盘事件 事件介绍 onclick 鼠标点击某个对象 ondbclick 鼠标双击某个对象 onmousedown 某个鼠标按键被按下 onmouseup 某个鼠标按键被松开 onmousemove 鼠标被移动 onmouseover 鼠标被移到某元素之上 onmou
vue表单信息提交（数据传到后台接口保存）
qq5678574的博客
12-07 1万+
提交按钮 <md-button type="primary" @click="onSubmit" round>提交</md-button> 绑定的onSubmit事件 onSubmit(){ Dialog.confirm({ title: '确认', content: '确认提交', confirmText: '确定', onConfirm: () => console.log('[Dialo
表单防止自动提交及onSubmit解析
lwj_199011的博客
12-24 704
form自动提交是指按回车键后，自动提交表单，为防止自动提交表单，可以在标签中添加事件属性onSubmit = "return false",这样回车提交表单就不会起作用了。 现在对自动提交表单的情形作一下测试： 1. username: 这种情况会自动提交表单，但是加上onSubmit="return false"之后，就不会了。这是最典型的情况 2.表单中有多个文本框
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值