首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

仅当输入有效时才提交onBlur函数

当输入有效时,提交onBlur函数是一种常见的前端开发技术,用于在输入框失去焦点时触发相应的操作。它可以用于验证用户输入的有效性、自动保存表单数据、实时更新页面内容等。

在前端开发中,常用的实现方式是通过给输入框添加onBlur事件监听器,当输入框失去焦点时,触发相应的函数。这个函数可以进行一系列的操作,例如验证输入的有效性、发送请求与后端交互、更新页面内容等。

以下是一个示例代码:

代码语言:txt
复制
<input type="text" onBlur="submitForm()" />

<script>
function submitForm() {
  // 获取输入框的值
  var inputValue = document.querySelector('input').value;

  // 验证输入的有效性
  if (inputValue === '') {
    alert('请输入有效内容');
    return;
  }

  // 执行提交操作
  // ...

  // 更新页面内容
  // ...
}
</script>

在这个示例中,当输入框失去焦点时,会调用submitForm函数。函数首先获取输入框的值,然后进行有效性验证,如果输入为空,则弹出提示框。接下来可以执行提交操作或者更新页面内容。

对于不同的应用场景,提交onBlur函数可以有不同的实现方式和操作。例如,在表单验证中,可以通过提交onBlur函数来验证用户输入的有效性,给出相应的提示信息。在实时搜索功能中,可以通过提交onBlur函数来发送搜索请求,获取搜索结果并更新页面内容。

腾讯云提供了丰富的云计算产品,可以满足各种应用场景的需求。具体推荐的产品和产品介绍链接地址可以根据实际需求来确定。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

HTML事件属性--DOM

} 13.onpopstate 浏览器窗口记录改变时运行的脚本, 14.onredo 文档执行撤销触发的事件 二、form事件属性 由html表单内触发的事件,通常使用在form元素中 1.onblur...=myfun()的事件,input失去焦点的时候产生什么样的效果 demo查看 2.onfocus 元素获得焦点触发事件,和onblur相反 demo查看 3.onchange 元素值被改变的时候触发事件...触发发不了脚本 6.onforminput 表单获得用户输入时触发的事件,无法触发 浏览器不支持 6.oninput 元素获得用户输入时触发的事件 输入输入或者删除都会触发oninput function myfun() { alert('onselect被触发 ') } demo查看 10.onsubmit 表单被提交触发.../在拖动操作末端运行的脚本 ondragenter/元素元素已被拖动到有效拖放区域时运行的脚本 ondragleave/元素离开有效拖放目标时运行的脚本 ondragover/元素在有效拖放目标上正在被拖动时运行的脚本

3.8K20
  • HTML简单注册界面——含表单验证

    imgchr.com/content/images/system/home_cover_1552414407320_3a5f92.jpg); background-repeat: no-repeat; /* 内容高度大于图片高度...失去焦点事件,用户离开输入执行 JavaScript 代码: //函数1:验证邮箱格式 function validate_username(username){ //定义正则表达式的变量:邮箱正则...; } } //函数3:验证两次输入的密码是否一样 function validate_password2(password2){ var password = document.getElementById...; console.log("信息填写正确,可以正常提交!"); return true; }else{ alert("密码不一致,提交失败,请重新填写!")...本站提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    5.1K30

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

    Register还将把每个值传递给一个函数,该函数将在提交表单被调用,下面我们将讨论这个问题。 为了让register正常工作,我们需要为每个输入提供一个适当的name属性。...其中一个输入无效,表单数据不会被提交(不会调用onSubmit)。此外,带有错误的第一个输入将自动聚焦,它不会向用户提供关于所发生事情的任何详细反馈。...默认的验证只在提交表单执行。 我们可以通过给useForm传递一个对象来改变这一点,我们可以在需要执行验证设置模式:onBlur、onChange或onSubmit。...每当用户'失去焦点'或点击远离输入onBlur将使验证运行。onChange是用户输入时验证,onSubmit是表单提交验证。...提交表单,它会被禁用直到验证完成运行onSubmit函数。 总结 我希望本文向您展示了如何在React应用程序中更容易地创建功能性表单。

    3.7K21

    JS事件相关知识点整理

    JS事件相关知识点整理 JS事件的驱动机制 常见JS事件 点击事件---onclick 焦点事件 获取焦点事件---onfocus 失去焦点事件----onblur 域内容改变事件---onchange...--Body标签加载完毕,弹出一个对话框--> 大忽悠和小朋友 ---- 表单提交事件—onsubmit 代码演示...-- 表单提交按钮被点击----- 执行run1() onsubmit 用于表单的校验 该事件能够控制表单的提交 true 表单成功提交 false 阻止表单提交..." value="提交"> ---- 键位弹起事件—onkeyup 键位弹起事件:在组件中输入某些内容,键盘键位弹起,触发该事件 代码演示...,而且不能传递参数 //页面加载完毕,执行run1万方 window.onload=run1(); //DOM绑定方式2: 匿名函数 可以绑定多个函数,可以传递参数 window.onload

    1.9K20

    JavaWeb day3 JavsScript 入门

    onfocus 元素获得焦点 onload 某个页面或图像被完成加载 onsubmit 表单提交触发该事件 onmouseover 鼠标被移到某元素之上...如下图,点击了输入框后,输入框就获得了焦点。而下图示例是获取焦点后会更改输入框的背景颜色。 图片 onblur 失去焦点事件。...完成以下需求: 输入框失去焦点,验证输入内容是否符合要求 点击注册按钮,判断所有输入框的内容是否都符合要求,如果不合符则阻止表单提交 8.2 环境准备 下面是初始页面 <!...密码输入框失去焦点,判断输入的内容是否符合 长度是 6-12 位 规则,不符合使 id='password_err' 的span标签显示出来,给出用户提示。 校验手机号。...手机号输入框失去焦点,判断输入的内容是否符合 长度是 11 位 规则,不符合使 id='tel_err' 的span标签显示出来,给出用户提示。 代码如下: //1.

    7.5K10

    JavaWeb day3 JavaScript入门

    表单提交触发该事件 onmouseover 鼠标被移到某元素之上 onmouseout 鼠标从某元素移开 onfocus 获得焦点事件。...如下图,点击了输入框后,输入框就获得了焦点。而下图示例是获取焦点后会更改输入框的背景颜色。 onblur 失去焦点事件。...完成以下需求: 输入框失去焦点,验证输入内容是否符合要求 点击注册按钮,判断所有输入框的内容是否都符合要求,如果不合符则阻止表单提交 8.2 环境准备 下面是初始页面 <!...密码输入框失去焦点,判断输入的内容是否符合 长度是 6-12 位 规则,不符合使 id='password_err' 的span标签显示出来,给出用户提示。 校验手机号。...手机号输入框失去焦点,判断输入的内容是否符合 长度是 11 位 规则,不符合使 id='tel_err' 的span标签显示出来,给出用户提示。 代码如下: //1.

    7.4K20

    javascript入门笔记5-事件

    网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。...比如说,当用户单击按钮或者提交表单数据,就发生一个鼠标单击(onclick)事件,需要浏览器做出处理,返回给用户一个结果。...) onblur事件与onfocus是相对事件,光标离开当前获得聚焦对象的时候,触发onblur事件,同时执行被调用的程序。...onblur="message()"> 8.内容选中事件(onselect) 选中事件,文本框或者文本域中的文字被选中,触发onselect事件,...加载页面,触发onload事件,事件写在body标签内。 b. 此节的加载页面,可理解为打开一个新页面。 如下代码,加载一个新页面,弹出对话框“加载中,请稍等…”。 <!

    1.2K30

    【Web APIs】JavaScript 操作元素 ⑧ ( DOM 操作元素 案例 | 获取焦点 onfocus 事件 | 失去焦点 onblur 事件 | 获取设置 HTML 页面背景颜色 )

    DOM 元素 获得焦点 , 该 DOM 元素上绑定的 onfocus 事件被触发 ; 绑定该 onfocus 事件的元素 一般都是 input 表单元素 ; 如 : 用户 点击输入框 或 通过键盘切换到输入...事件 在 JavaScript 中 , DOM 元素 失去焦点 , 该 DOM 元素上绑定的 onblur 事件被触发 ; 如 : 用户从 输入框 移动到 页面的其他部分 或 按下 Tab 键...移动 焦点 , 该事件会被触发 ; 绑定 onblur 事件的方法 : 设置 onblur 属性 : 可以通过 DOM 操作 , 给元素添加 onblur 属性 , 来指定当焦点集中在元素上要执行的...方法来 动态地 为元素添加 onblur 事件的处理函数 ; // 使用 addEventListener document.getElementById("myInput").addEventListener...'; } 2、执行效果 默认状态 , 显示如下样式 , input 表单中 显示 " 请输入搜索内容 " 字体是黑色的 ;

    10410

    oninput onpropertychange「建议收藏」

    ,而是在打完这后,焦点移出去之后,触发;只有人工触发才有效,如果利用 JavaScript 程序改变是没有效果的。...onpropertychange的bug 在代码实现时,发现在响应用户onclick了textarea,如果使用obj.className=”XX”;来改变textarea输入框中字体的样式...失效的情况: oninput事件: (1)脚本中改变value,不会触发; (2)从浏览器的自动下拉提示中选取,不会触发; onpropertychange事件: input设置为disable...,而是在打完这后,焦点移出去之后,触发;只有人工触发才有效,如果利用 JavaScript 程序改变是没有效果的。...失效的情况: oninput事件: (1)脚本中改变value,不会触发; (2)从浏览器的自动下拉提示中选取,不会触发; onpropertychange事件: input设置为disable

    52340

    表单验证和正则表达式

    JavaScript中的正则表达式 提示:在JavaScript代码中,函数需要传入的参数是一个对象,在函数主体body中一定需要对这个参数进行判断是否为null。...表单验证的作用:把输入的表单数据传入给JavaScript代码进行验证,可以让网络应用程序更加可靠,也能减少服务器的负担,同时减少客户端与服务器的带宽。...onblur事件适合触发数据验证。如何处理用户复制/粘贴文本到表单域中?(onblur和onfocus是相反事件) onblur事件:表单域失去焦点触发。...onfocus事件:表单元素或表单域获得输入的焦点触发。 this关键字,在HTML元素的上下文中,它代表该元素的对象。...表单域的所有验证都通过后,可以调用form.submit()方法将表单的值提交给服务器。

    1.9K50
    领券