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

JavaScript OnBlur事件阻止提交HTML表单

JavaScript OnBlur事件阻止提交HTML表单

OnBlur事件是一个JavaScript事件,当一个元素失去焦点时触发。在HTML表单中,可以使用OnBlur事件来验证用户输入的数据,并在必要时阻止表单提交。

以下是一个简单的示例,演示如何使用OnBlur事件验证用户输入的电子邮件地址,并在地址无效时阻止表单提交:

代码语言:html
复制
<form onsubmit="return validateForm()">
 <label for="email">Email:</label>
 <input type="email" id="email" name="email" onblur="validateEmail()">
 <input type="submit" value="Submit">
</form><script>
function validateEmail() {
  var emailInput = document.getElementById("email");
  var email = emailInput.value;
  var re = /\S+@\S+\.\S+/;
  if (re.test(email)) {
    emailInput.style.borderColor = "";
  } else {
    emailInput.style.borderColor = "red";
  }
}

function validateForm() {
  var emailInput = document.getElementById("email");
  if (emailInput.style.borderColor == "red") {
    alert("Please enter a valid email address");
    return false;
  }
  return true;
}
</script>

在这个示例中,当用户点击表单中的其他元素时,OnBlur事件会触发validateEmail()函数,该函数会检查电子邮件地址是否有效。如果电子邮件地址无效,则会将输入框的边框颜色更改为红色。

当用户尝试提交表单时,onsubmit事件会触发validateForm()函数,该函数会检查电子邮件地址是否有效。如果电子邮件地址无效,则会弹出警告框并阻止表单提交。

总之,OnBlur事件可以用于验证用户输入的数据,并在必要时阻止表单提交。

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

相关·内容

html表单提交

html表单提交,哪些标签的哪些值会被提交给服务器呢? 1、只能为input、textarea、select三类类型的标签。...当input=submit的时候,只有被点击的按钮的value才会被提交; 2、input标签有title、type、disabled、value等属性,但只有value属性的值才会提交到服务器,其他属性都是供显示用的...如果要将标签的value属性值提交到服务器,则必须为标签设定name属性,提交到服务器的时候将会以“name=value"的键值对的方式提交到服务器。name是给服务器用的,id是给Dom用的。...对于RadioButton,同name的为一组,选中的RadioButton的value被提交到服务器; 4、要提交的标签必须放到form标签内。...只有放到form标签内的标签才可能会被提交到服务器,form之外的input标签会被忽略掉。

5.4K30
  • JavaScript表单提交

    JavaScript中有四种种表单提交的方式: 一、 Form表单手动提交(get与post) 在没有任何Js代码的影响下,Form表单本身是自带提交功能的。...在form元素标签上有两个属性: (1) action:设置表单提交的路径(URL) (2) method:设置表单提交的方式 表单提交的路径分为两种: (1) 相对路径:指站点内的文件,就是本地文件...3.判断通过后通过id获取到Form表单,然后通过点的方式点出Form表单的method和action属性并赋值为通过get或是post提交提交的路径,最后通过submit方法提交表单。...5.函数方法写完之后可以通过获取到按钮设置点击事件,也可以通过事件属性设置点击事件等即可。...发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/184968.html原文链接:https://javaforall.cn

    4.9K10

    html表单提交_html表单标签有哪些

    表单属性设置 标签 表示表单标签,定义整体的表单区域 action属性 设置表单数据提交地址 method属性 设置表单提交的方式,一般有“GET”方式和“POST”方式, 不区分大小写...表单元素属性设置 name属性 设置表单元素的名称,该名称是提交数据时的参数名 value属性 设置表单元素的值,该值是提交数据时参数名所对应的值 3...."> 4、小结 表单标签的作用就是可以把用户输入数据一起提交到web服务器...表单属性设置 action: 是设置表单数据提交地址 method: 是表单提交方式,提交方式有GET和POST 表单元素属性设置 name: 表单元素的名称,用于作为提交表单数据时的参数名...value: 表单元素的值,用于作为提交表单数据时参数名所对应的值 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。

    2.8K10

    HTML基础——表单提交

    表单属性设置 标签 表示表单标签,定义整体的表单区域 action属性 设置表单数据提交地址 method属性 设置表单提交的方式,一般有“GET”方式和“POST”方式, 不区分大小写...表单元素属性设置 name属性 设置表单元素的名称,该名称是提交数据时的参数名 value属性 设置表单元素的值,该值是提交数据时参数名所对应的值 3...."> 小结 表单标签的作用就是可以把用户输入数据一起提交到web服务器...表单属性设置 action: 是设置表单数据提交地址 method: 是表单提交方式,提交方式有GET和POST 表单元素属性设置 name: 表单元素的名称,用于作为提交表单数据时的参数名 value...: 表单元素的值,用于作为提交表单数据时参数名所对应的值

    6.6K1180

    表单提交后端如何接收数据_html怎么接收表单提交的内容

    = require("querystring"); //创建服务器 var server = http.createServer(function (req,res) { //如果你访问的地址是表单提交的这个地址...,并且表单提交的方式是POST // toLowerCase即将字母都转为小写 //可能接受一小段之后就去给别人服务了,放置过大的表单阻塞了整个进程 if(req.url == "/dopost"&&req.method.toLowerCase...util = require(“util”); //创建服务器 var server = http.createServer(function (req,res) { //如果你访问的地址是表单提交的这个地址...,并且表单提交的方式是POST // toLowerCase即将字母都转为小写 //可能接受一小段之后就去给别人服务了,放置过大的表单阻塞了整个进程 if(req.url == “/dopost.../uploads"; 将表单提交的文件存储到一个名为uploads的文件夹中 加强版:现在我们希望图片等文件上传之后,能够按照我们希望的格式存储下来: 我们可以看到在输出的files对象中,有path

    5.9K20

    开发者需要掌握的JS事件

    使用场景:没有提交按钮,我们一般采用回车进行提交 Demo: window.onload = function(){ document.getElementById...,产生一个event对象 ,传递默认方法 6.form的提交、重置事件 submit/reset onsubmit = "return validateForm" 对表单进行校验 7.改变事件 onchange...制作select联动效果 ---- 省市联动 重点 : onclick 、onchange 、onblur、 onsubmit 8.默认事件阻止和传播阻止 使用场景极为常见,超链接用户点击后,取消了不发生跳转... // 阻止默认事件发生 functionconfirmDel(e){ varisConfirm = window.confirm("确认删除吗...> HTML DOM Event对象 提供preventDefault()用于阻止默认事件的发生, 该方法IE 不支持 ,在IE中使用 returnValue 提供stopPropagation

    2.5K80

    JavaScript HTML DOM 事件

    事件做出反应 我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。...如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加 JavaScript 代码: onclick=JavaScript HTML 事件的例子: 当用户点击鼠标时 当网页已加载时 当图像已加载时...当鼠标移动到元素上时 当输入字段被改变时 当提交 HTML 表单时 当用户触发按键时 在本例中,当用户在 元素上点击时,会改变其内容: 实例 <!...---- 使用 HTML DOM 来分配事件 HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件: 实例 向 button 元素分配 onclick 事件: <script...按钮点击时Javascript函数将会被执行。 ---- onload 和 onunload 事件 onload 和 onunload 事件会在用户进入或离开页面时被触发。

    1.7K30
    领券