开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

OnSubmit之前是否会等待OnBlur执行？

在前端开发中，OnSubmit和OnBlur是两个常见的事件处理函数。

OnBlur是一个事件，在某个表单元素失去焦点时触发。通常用于验证输入的有效性或执行一些其他操作。OnSubmit则是一个事件，在表单提交之前触发。它通常用于验证整个表单的有效性，然后再执行提交操作。

在一般情况下，OnSubmit不会等待OnBlur执行。这是因为OnBlur是在表单元素失去焦点时触发，而OnSubmit是在用户点击提交按钮时触发。用户可以在填写表单时任意顺序地点击不同的表单元素，导致多个元素的OnBlur事件被触发。如果OnSubmit需要等待每个表单元素的OnBlur执行完毕，会导致用户填写表单的体验变差，用户可能需要等待较长时间才能提交表单。

然而，可以通过编写自定义的逻辑来实现OnSubmit等待OnBlur执行的效果。可以在OnSubmit事件处理函数中，手动触发每个表单元素的OnBlur事件，并在每个OnBlur事件的回调函数中维护一个计数器，统计已经执行完毕的OnBlur事件个数。当所有的OnBlur事件都执行完毕时，再执行提交操作。

总结：

OnSubmit和OnBlur是前端开发中常见的事件处理函数。
OnBlur是在表单元素失去焦点时触发，OnSubmit是在提交表单之前触发。
一般情况下，OnSubmit不会等待OnBlur执行。
可以通过自定义逻辑实现OnSubmit等待OnBlur执行的效果。

相关腾讯云产品：

如果您需要在云端部署前端应用，可以使用腾讯云的云服务器（ECS）产品。详情请参考：云服务器
如果您需要在云端部署后端应用，可以使用腾讯云的云函数（Serverless）产品。详情请参考：云函数
如果您需要在云端存储数据，可以使用腾讯云的云数据库（CDB）产品。详情请参考：云数据库
如果您需要在云端存储和管理多媒体文件，可以使用腾讯云的对象存储（COS）产品。详情请参考：对象存储
如果您需要在云端搭建区块链网络，可以使用腾讯云的区块链服务（BCS）产品。详情请参考：区块链服务

相关搜索:是否会等待到子例程执行完毕？是否在异步/等待函数完成之前执行代码？在返回值之前等待for循环执行执行子组件之前，请等待对象可用在执行其他代码之前等待异步请求是否有可能在继续之前等待内部的“等待”？如何在执行其余代码之前等待图像下载如何在提供文件之前等待Python shell执行在继续执行JavaScript之前，请等待页面加载如何检查是否有performSelector:等待执行？在调用setState方法之前，.then是否等待next完成？Bash:在执行bash之前等待派生的子进程代码在预期之前执行，异步/等待未按预期工作如何让测试用例在()执行完成之前等待？"if“条件中的可等待方法-执行是否等待方法的结果在Kotlin中，main()函数之前会执行哪些指令？在执行document.ready之前,JQuery正在等待加载图像在再次执行之前，请等待部分异步函数完成节点在执行代码之前等待所有异步调用是否可以在where子句之前执行if else

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

C语言main()主函数执行完毕后是否会再执行一段代码

main() 主函数执行完毕后，是否可能会再执行一段代码？给出说明。...main主函数是所有程序必须具备的函数，是C/C++人员一接触代码就知道的函数，那么这个问题会难倒很多人，尤其是平常不注意思考，不懂得问为什么的程序员，这个问题的答案是：main() 函数结束后可以执行一些代码...过程分析：atexit函数先注册四个fun函数，，然后等待3秒，再打印"hello main"（如果main函数中输出部分不加\n，则main函数要输出的内容会先放到标准输出缓冲区中，当main中调用exit...函数的时候，会做一些自身清理工作，同时刷新标准输出缓冲区中的内容），当执行到exit(0)时，exit会自动调用这些已注册过的函数，但是由于压栈过程中先入后出的原则，所以先注册的函数最后执行关于atexit...main函数结束时也会隐式地调用exit()函数。

1.8K5 0

JavaWeb day3 JavaScript入门

trim() 函数在以后开发中还是比较常用的，例如下图所示是登陆界面用户在输入用户名和密码时，可能会习惯的输入一些空格，这样在我们后端程序中判断用户名和密码是否正确，结果肯定是失败。...验证手机号是否符合规则 //1.1 获取手机号的输入框 var telInput = document.getElementById("tel"); //1.2 绑定onblur事件失去焦点 telInput.onblur...绑定onsubmit 事件 regForm.onsubmit = function () { } onsubmit 事件绑定的函数需要对输入的用户名、密码、手机号进行校验，这些校验我们之前都已经实现过了...绑定onsubmit 事件 regForm.onsubmit = function () { //挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回false var flag...绑定onsubmit 事件 regForm.onsubmit = function () { //挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回false

7.4K2 0

JavaWeb day3 JavsScript 入门

trim() 函数在以后开发中还是比较常用的，例如下图所示是登陆界面图片用户在输入用户名和密码时，可能会习惯的输入一些空格，这样在我们后端程序中判断用户名和密码是否正确，结果肯定是失败。...验证手机号是否符合规则 //1.1 获取手机号的输入框 var telInput = document.getElementById("tel"); //1.2 绑定onblur事件失去焦点 telInput.onblur...绑定onsubmit 事件 regForm.onsubmit = function () { } onsubmit 事件绑定的函数需要对输入的用户名、密码、手机号进行校验，这些校验我们之前都已经实现过了...绑定onsubmit 事件 regForm.onsubmit = function () { //挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回false var flag...绑定onsubmit 事件 regForm.onsubmit = function () { //挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回false

7.5K1 0

快来使用 React-Hook-Form 搭建强大的React表单

validate允许我们提供自己的逻辑来确定它是否有效(通过返回布尔值true或false)。对于这里的电子邮件，我们也希望它是必需的，并且是有效的电子邮件。...{formState.isSubmitting}> Submit ); } 验证模式您会注意到...默认的验证只在提交表单时执行。我们可以通过给useForm传递一个对象来改变这一点，我们可以在需要执行验证时设置模式:onBlur、onChange或onSubmit。...每当用户'失去焦点'或点击远离输入，onBlur将使验证运行。onChange是用户输入时验证，onSubmit是表单提交时验证。...对于我们的表单，让我们选择 onBlur : const { register, handleSubmit, errors } = useForm({ mode: "onBlur", }); 请注意

3.6K2 1

HTML事件属性--DOM

window.onbeforeunload = function(){ return "提示" //返回的内容不会显示， //在刷新的时候触发，或者关闭浏览器，浏览会直接提示是否重新加载...} 13.onpopstate 当浏览器窗口记录改变时运行的脚本， 14.onredo 当文档执行撤销时触发的事件二、form事件属性由html表单内触发的事件，通常使用在form元素中 1.onblur...当表单被提交时触发要把事件绑定到form标签里面 <!...，一闪而过，只有alert能停留在页面上，等待点击确定三、key键盘事件 1.onkeydown 按下任意键时触发，包括系统按钮，箭头和功能键 demo查看 2.onkeypress 按下任意字母数字键时触发...，但系统按钮，箭头和功能无法识别 3.onkeyup 松开任何之前按下的键盘时触发 demo查看四、mouse鼠标事件利用鼠标触发的事件 1.onclick 鼠标点击元素触发的事件 <p onclick

3.8K2 0

JavaScript---网络编程(12)--DHTML技术演示(5)-form表单验证技术(正则)

/> function checkUserName(){ //alert("aa");//测试这个失去焦点监听是否管用...--onblur 在对象失去输入焦点时触发。...var str = "123456"; var bRes = reg.test(str); //111使用正则表达式对象中的方法进行验证---只能用于判断是否匹配...如果不注册onsubmit事件即是return true onsubmit 当表单将要被提交时触发。...会自动给我们配好web.xml ?

1.1K2 0

JavaWeb——JavaScript精讲之事件监听机制与表单校验案例实战

1、事件监听机制概述事件监听机制，指的是某些组件被执行了某种操作后，触发某些代码的执行。事件：某些操作，如：单击、双击操作，键盘按下了，鼠标移动了。...注册监听：将事件、事件源、监听器结合在一起，当事件源上发生了某个事件，则触发执行某个监听代码。...window.onload = function () { /* //失去焦点事件 document.getElementById("username").onblur...option> 2、表单验证实战在之前的用户登录博文代码的基础上...= checkUsername; document.getElementById("psd").onblur = checkPassword; }

8322 0

JavaScript 事件

document.addEventListener('mouseover', function () { console.log(i++) }) 0 鼠标滚轮事件 mousewheel 不管是否出现了滚动条...输入框光标激活时，鼠标点击输入框以外的地方会取消光标，同时也属于失去焦点。... var i = 0 function fn() { console.log(...表单提交默认是会刷新页面的，这样的用户体验会很差，所以需要搭配 e.preventDefault() 阻止原生事件执行。... var i =

7002 0

开发者需要掌握的JS事件

JavaScript事件事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。事件是基于对象存在，事件通常可以修饰多种对象。...document.getElementById("username").style.color="black"; } //离焦事件 document.getElementById("username").onblur...= "return validateForm" 对表单进行校验 7.改变事件 onchange 制作select联动效果 ---- 省市联动重点： onclick 、onchange 、onblur...、 onsubmit 8.默认事件的阻止和传播阻止使用场景极为常见，超链接用户点击后，取消了不发生跳转。...-- 事件冒泡传播 --> 这个链接会触发两个事件执行</div

2.5K8 0

dotnet C# 如果在构造函数抛出异常析构函数是否会执行

假设在某个类型的构造函数里面抛出了异常，那么这个对象的析构函数是否会执行如下面代码 private void F1() { try...new Exception("lindexi is doubi"); } ~Foo() { } } 请问以上代码的 ~Foo 是否可以在垃圾回收执行...，或者说在构造函数里面抛出异常，是否这个对象可以被垃圾回收试试以下代码，然后在 ~Foo 添加断点 static void Main(string[] args) {

4722 0

JS事件相关知识点整理

JS事件相关知识点整理 JS事件的驱动机制常见JS事件点击事件---onclick 焦点事件获取焦点事件---onfocus 失去焦点事件----onblur 域内容改变事件---onchange...function callPolice() { alert("失去焦点了"); } <input type="text" onblur...-- 表单提交按钮被点击----- 执行run1() onsubmit 用于表单的校验该事件能够控制表单的提交 true 表单成功提交 false 阻止表单提交...--绑定多个函数，绑定顺序就是执行顺序--> ...小朋友"); } //以下两两种DOM绑定方式，用哪一种都可以 //DOM绑定方式1: 对象.事件属性一次只能绑定一个函数，而且不能传递参数 //当页面加载完毕，执行

1.9K2 0

【JavaScript脚本】——T2事件操作

【JavaScript脚本】——T2事件操作自定义函数 function 函数名 ( 参数1,参数2){ 执行语句 } function fun(obj){ return...type="text" id="ysf" placeholder="请输入运算符:" onblur="REx(this)" <input type="button" onclick="calc()" value...document.body.style.backgroundColor = "#ffffff"; break; } } onSubmit...事件: 主要用于校验数据 <input type="text" name

3542 0

JavaScript 学习-29.HTML DOM 事件

执行脚本代码。 onunload 用户退出页面。( 和 ) onclick 当用户点击某个对象时调用的事件句柄。 onmouseover 鼠标移到某元素之上。...onfocus 元素获取焦点时触发 onsubmit 表单提交时触发 onload 加载页面 onload 通常用于元素，在页面完全载入后(包括图片、css文件等等。)...执行脚本代码。...20170417224839696-1584175751.jpg" onload="load_something();"> onclick 点击事件 onclick 点击事件 ,当按钮被点击时执行...onfocus 获取焦点的时候触发 onblur 当元素失去焦点的时候触发使用示例 onfocus 获取焦点和 onblur 失去焦点 <form

1K1 0

简单的注册模块表单验证处理

有简单的验证提示功能具体可以查看演示代码思路也比较简单输入框失去焦点时便检测，并进行处理表单具有 onsubmit = "return check()"行为，处理验证情况点击提交表单按钮时...，进行最终的验证，达到是否通过表单提交的请求。... 13 14 29 30 然后是js的class相关处理函数 function hasClass(obj,cls){ // 判断obj是否有此...39 40 41 function hasClass(obj,cls){ // 判断obj是否有此

3.3K1 0

java从入门到精通二十二（web服务器tomcat）

之前我们说可以在webapp下面部署项目。我们现在简单在webapp下面建立一个文件夹，然后在里面写一段html语言。按照我这个目录我们可以在地址栏输入。...绑定onblur事件失去焦点 usernameInput.onblur = checkUsername; function checkUsername() { //...绑定onblur事件失去焦点 passwordInput.onblur = checkPassword; function checkPassword() { //...验证手机号是否符合规则 //1.1 获取手机号的输入框 var telInput = document.getElementById("tel"); //1.2 绑定onblur...绑定onsubmit 事件 regForm.onsubmit = function () { //挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回false

5112 0

04_使用JS完成功能

; return false; } } (2)在输入框后面进行错误提示思路分析: /* 1.确定使用聚焦事件onfocus和离焦事件onblur和onsubmit 2....onblur="check('user','用户名不能为空！')"...document.getElementById(id+"span").innerHTML=""; } } 2.使用JS完成首页轮播图效果案例思路分析: 1.确定事件onload(页面加载就会执行.../img/1.jpg" width="1300px" id="img1"/> JS代码 function init(){ //定时器会返回一个值，这个值可以用来取消定时器的...onsubmit：表单提交事件，有返回值，控制表单是否提交。

3.9K6 0

HTML属性及事件

draggable 指定某个元素是否可以拖动 dropzone 指定是否将数据复制，移动，或链接，或删除 hidden hidden 属性规定对元素进行隐藏。...在文档加载之前运行脚本 onblur 当窗口失去焦点时运行脚本 onerror 当错误发生时运行脚本 onfocus 当窗口获得焦点时运行脚本 onhaschange 当文档改变时运行脚本 onload...ononline 当文档上线时运行脚本 onpagehide 当窗口隐藏时运行脚本 onpageshow 当窗口可见时运行脚本 onpopstate 当窗口历史记录改变时运行脚本 onredo 当文档执行再执行操作...onunload 当用户离开文档时运行脚本表单事件属性描述 onblur 当元素失去焦点时运行脚本 onchange 当元素改变时运行脚本 oncontextmenu 当触发上下文菜单时运行脚本...onselect 当选取元素时运行脚本 onsubmit 当提交表单时运行脚本键盘事件属性值 onkeydown 当按下按键时行脚本 onkeypress 当按下并松开按键时运行脚本 onkeyup

2.8K2 0

JavaScript 事件基础补充

JavaScript事件处理函数及其使用列表事件处理函数影响的元素何时发生 onabort 图像当图像加载被中断时 onblur 窗口、框架、所有表单对象当焦点从对象上移开时 onchange...input.onmousemove = function () { alert('Lee'); }; 2.键盘事件 keydown：当用户按下键盘上任意键触发，如果按住不放，会重复触发。...onkeydown = function () { alert('Lee'); }; keypress：当用户按下键盘上的字符键触发，如果按住不放，会重复触发。...input.onblur = function () { alert('Lee'); }; submit：当用户点击提交按钮在元素上触发。...form.onsubmit = function () { alert('Lee'); }; reset：当用户点击重置按钮在元素上触发。

3.1K5 0

01-React基础(JSX, State, Refs, Props组件交互, Event, 生命周期)

定义方式三 : React.createRef() : 推荐 # 我对这种方式进行了优化 # 调用函数 <input ref={this.refsiCopy('inputOne')} type="text" onBlur...React.Component { render() { return ( # 定义事件, 通过驼峰定义, React在原生事件上,包装了一层, 默认会传入...event对象 ) }...Demo extends React.Component { render() { return ( # 表单提交 <form onSubmit...提交的名字: ' + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit

1.1K3 0

【JavaScript小项目】用户注册校验

document.getElementById("repassword_msg").innerHTML = "密码长度至少为6位"; // 如果密码长度校验失败,后续的逻辑就不需要再执行了...checkCode(); return flag; } 手机号: 用户名: <input type="text" name="checkcode" id="checkcode" onblur

1.5K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭