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

为什么一个表单的onsubmit函数只被调用一次?

一个表单的onsubmit函数只被调用一次是因为onsubmit事件是在表单提交时触发的,而表单提交后页面会刷新,所以onsubmit函数只会被调用一次。

onsubmit是HTML表单元素的一个事件属性,它可以指定一个JavaScript函数,在表单提交时执行该函数。当用户点击表单中的提交按钮或按下回车键时,表单会被提交,同时触发onsubmit事件。

onsubmit函数通常用于对表单数据进行验证和处理。在函数中,可以通过获取表单元素的值,进行数据校验、格式化等操作。如果表单数据符合要求,可以继续提交表单;如果不符合要求,可以阻止表单的提交,给出相应的提示信息。

以下是一个示例的onsubmit函数:

代码语言:txt
复制
function validateForm() {
  var name = document.forms["myForm"]["name"].value;
  var email = document.forms["myForm"]["email"].value;
  
  if (name == "") {
    alert("请输入姓名");
    return false;
  }
  
  if (email == "") {
    alert("请输入邮箱");
    return false;
  }
  
  // 其他验证逻辑...
  
  // 如果表单数据验证通过,可以继续提交表单
  return true;
}

在HTML中,可以将该函数绑定到表单的onsubmit属性上:

代码语言:txt
复制
<form name="myForm" onsubmit="return validateForm()">
  <!-- 表单元素... -->
  <input type="submit" value="提交">
</form>

在上述示例中,当用户点击提交按钮时,会调用validateForm函数进行表单数据的验证。如果验证通过,返回true,表单会继续提交;如果验证不通过,返回false,表单提交将被阻止,并弹出相应的提示信息。

腾讯云提供了一系列与云计算相关的产品,如云服务器、云数据库、云存储等,可以根据具体需求选择适合的产品。具体产品介绍和相关链接地址可以参考腾讯云官方文档或官方网站。

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

相关·内容

文档和元素几何滚动

web服务器字符串 表单和元素事件处理程序 每个form元素都有一个onsubmit事件处理程序用来检测表单提交。...还有一个onreset事件处理程序来检测表单重置。表单提交前将会调用onsubmit程序,如果回调函数返回值为false则会取消表单提交动作。这是js程序一个用来检查用户输入错误。...(通过回车也能触发该事件)如果直接调用表单submit()方法将不会触发onsubmit事件处理程序。onreset事件处理程序和onsubmit是类似的。也是会在表单重置之前触发该事件。...使用场景:对用户表单进行输入验证 具体后面有事件,继续写。 其过程如下 先触发onsubmit事件 → 接着调用submit()方法完成提交。...过程: 先触发事件onclick → 调用对象方法click 区别 方法能够直接调用,事件只能等待触发 change事件 当用户该表表单元素值,然后触发一个click事件时候,将会触发上一个表单

5.2K00

React面试题精选

Refs是你访问DOM元素或者组件实例一个安全门。为了使用它们,你可以在组件加上一个ref属性,ref值是一个回调函数,这个回调函数接受底层DOM元素或者挂载组件实例作为它一个参数。...key都必须是唯一,我们已经多次提到了reconciliation和它其中一个过程是比较新element tree和上一次element tree。...主要原因就是受控组件有助于进行表单验证,控制按钮是否可点击,强制输入格式,并且它也更符合“React way” ---- 在生命周期哪个阶段发生ajax请求而且为什么?...权衡componentWillMount 函数在一次生命周期中可能调用多次,将Ajax请求放在这个函数里就具有了不确定性。这对Ajax请求来说是个不是个好选择。...一个可以在setState调用完成component重新渲染后调用回调函数, setState是异步操作函数,这也是它为什么一个回调函数作为第二个参数原因。

2.7K42

浅谈表单受控性及结合Hooks应用

通过 defaultValue 来设置组件默认值,它仅会被渲染一次,在后续渲染时并不起作用 使用场景 基本为最佳实践 一般作为简易实现 3 使用 Hooks 管理 form 优势 以 ant3...: 由于 HOC 设计 ,state 存于顶级组件,即便只有一个表单控件 value 值改变,所有的子组件也会因父组件 rerender 而 render,浪费了性能 总结: ant3 时代 form...一个表单控件 value 值改变,便会影响整个表单查询渲染 antd4 中 form 组件设计思想: 使用 Context 包裹 form 表单,并在 useForm() 时创建一个 FormStore...利用 useRef 特性,在调用 useForm 组件中,从创建到销毁等各种生命周期,无论组件渲染多少次,FormStore 只会实例化一次,在每个 Field 中定义 forceUpdate()...} Submit ); } 为什么会说 react-hook-form 提供一个非受控表单

20710

表单提交中input、button、submit区别

作为按钮input控件同时当做一个表单输入提交给了服务器。 它到底是交互控件还是数据控件呢?定位是有些不清晰。...这也是为什么Bootstrap 文档中大量使用button作为示例原因之一。   但是,button会很乱。button可以设置name和value。...当表单中只有一个单行文本输入控件时,用户代理应当接受回车键来提交表单。 “单行”指的是type为text而非textarea,显然在textarea中回车提交表单是怎样难以接受。...其实在实践中,有多个单行input也可以用Enter提交,比如登录页面。 4.阻止表单提交 阻止表单提交也是一个常见的话题,通常用于客户端表单验证。...如果你希望调用一个方法来决定是否阻止提交,记得在此处返回方法返回值: <input value

3K100

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

Register还将把每个值传递给一个函数,该函数将在提交表单调用,下面我们将讨论这个问题。 为了让register正常工作,我们需要为每个输入提供一个适当name属性。...为了处理提交表单和接收输入数据,我们将在表单元素中添加一个onSubmit,并将其连接到同名本地函数: function App() { const { register } = useForm...我们需要给他们反馈来修复他们提供值。 当其中一个输入无效时,表单数据不会被提交(不会调用onSubmit)。此外,带有错误一个输入将自动聚焦,它不会向用户提供关于所发生事情任何详细反馈。...我们可以从 useForm 中获取一个 errors对象,而不仅仅是不提交表单。 就像我们在 onSubmit 中获得数据函数一样,errors 包含对应于每个输入名称属性,如果它有错误的话。...默认验证只在提交表单时执行。 我们可以通过给useForm传递一个对象来改变这一点,我们可以在需要执行验证时设置模式:onBlur、onChange或onSubmit

3.5K21

JS事件相关知识点整理

加载完毕事件----onload 表单提交事件---onsubmit 键位弹起事件---onkeyup 常用鼠标事件 鼠标移入事件----onmouseover 鼠标移出事件---onmouseout...--当Body标签加载完毕时,弹出一个对话框--> 大忽悠和小朋友 ---- 表单提交事件—onsubmit 代码演示...-- 表单提交按钮点击----- 执行run1() onsubmit 用于表单校验 该事件能够控制表单提交 true 表单成功提交 false 阻止表单提交...元素事件句柄绑定 将事件以元素属性方式写到标签内部,进而绑定对应函数 示例1:绑定一个函数或者对象 <!...function run2() { alert("小朋友"); } //以下两两种DOM绑定方式,用哪一种都可以 //DOM绑定方式1: 对象.事件属性 一次只能绑定一个函数

1.9K20

js – form表单提交不刷新

大家已经发现了, 当我们点击submit提交form表单时候, 他会刷新一次, 如果不想它刷新的话有下面两种方法: 利用iframe 我们可以利用一个隐藏iframe来实现, 主要是我们把提交目标放到一个隐藏...事件 我们还可以绑定onsubmit事件(用jq的话是submit()), 在submit按钮效果触发之前我们就把数据提交了, 然后我们return false(让submit这次点击触发事件失效,...否则表单又会提交一次, 并且刷新页面) 我们可以这样: ====== 如果你用原生js的话 html代码: <form id="err_form" onsubmit="return post_data(...一定要写 } /* 18-1-17更新 */ 这里有一个小技巧, 刚刚发现....我们在绑定onsubmit时候是把return false放进onsubmit后面的调用函数内, 这样子如果你函数出现了错误, 将不会继续执行到函数最后’return false’这里, 还是会出现刷新现象

14.3K10

React技巧之表单提交获取input值

在form表单上设置onSubmit属性。 在handleSubmit函数中访问输入控件值。...form表单button元素具有submit类型,所以每当按钮点击时,form表单submit事件就会被触发。...然而,这并不是必须,如果你不想设置初始值,你可以省略这个属性。 当使用不受控制输入控件时,我们使用ref来访问input元素。useRef()钩子可以传递一个初始值作为参数。...该钩子返回一个可变ref对象,其.current属性初始化为传递参数。 需要注意是,我们必须访问ref对象current属性,以获得对我们设置ref属性input元素访问。...不管你表单有多少不受控制输入控件,只要调用reset()方法就可以清除所有的字段。 当表单被提交时,获取输入控件值另一种方法是,使用name属性访问表单元素。

1.5K20

JavaScript 表单验证

JavaScript 表单验证 JavaScript 可用来在数据送往服务器前对 HTML 表单这些输入数据进行验证。...表单数据经常需要使用 JavaScript 来验证其正确性: 验证表单数据是否为空? 验证输入是否是一个正确email地址? 验证日期是否输入正确? 验证表单输入内容是否为数字型?...---- 必填(或必选)项目 下面的函数用来检查用户是否已填写表单必填(或必选)项目。...["fname"].value; if (x==null || x=="") { alert("姓必须填写"); return false; } } 以上函数在 form 表单提交时调用...同时,@ 不可以是邮件地址首字符,并且 @ 之后需有至少一个点号: function validateForm(){ var x=document.forms["myForm"]["email"]

3.1K30

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

3、onkeyup    某个键盘按键松开 6)选中和改变:1、onchange 域内容改变                           2、onselect 文本被选中 7)表单事件:...1、onsubmit 确认按钮点击,方法返回false,则阻止表单提交                       2、onreset 重置按钮点击 【举例】基本事件示例 <!...在之前用户登录博文代码基础上,添加表单校验内容,代码如下: <!...onsubmit事件,监听器中判断每一个方法校验结构,如果都为true,则返回true,若有一个为false,则监听器返回false * 2、定义一些方法分别校验各个表单项...("form").onsubmit = function () { //调用用户校验方法 //调用密码校验方法

78820

JavaWeb day3 JavaScript入门

onsubmit 表单提交事件 如下是带有表单页面 html <!...现需要通过 js 代码实现阻止表单提交功能,js 代码实现如下: 获取 form 表单元素对象。 给 form 表单元素对象绑定 onsubmit 事件,并绑定匿名函数。...不需要,只需要对之前校验代码进行改造,把每个校验代码专门抽象到有名字函数中,方便调用;并且每个函数都要返回结果来去决定是提交表单还是阻止表单提交,代码如下: //1....绑定onsubmit 事件 regForm.onsubmit = function () { //挨个判断每一个表单项是否都符合要求,如果有一个不合符,则返回false var flag...绑定onsubmit 事件 regForm.onsubmit = function () { //挨个判断每一个表单项是否都符合要求,如果有一个不合符,则返回false

7.3K20

C++11 lambda

lambda和functor函数调用执行代码是相同。唯一区别是lambda构造函数内联到创建lambda函数中,而不是像构造函数那样是一个单独函数。...与按值捕获一样,functor和lambda调用代码是等价,但是lambda构造函数是内联,而functor则不是。 结论 C ++ lambda和子比相似之处更多。...总结主要区别: 1、子和lambda总是传递一个this指针,而普通函数自然不是。这会消耗一个额外寄存器和8个字节堆栈空间。 Lambda“构造函数”内联到创建Lambda函数中。...这显着减少了执行复制量(lambda2条指令,5条指令),以及避免了函数调用建立和拆卸。...对于普通函数而言,函数只是用来表达一个运算过程,它无法记住运算过程中一些状态数据。函数就像一个漏斗,数据可以从这个漏洞中流过,发生某些变化,但是这个漏斗什么都不会留下。

1.1K30

JavaWeb day3 JavsScript 入门

onfocus 元素获得焦点 onload 某个页面或图像被完成加载 onsubmit表单提交时触发该事件 onmouseover 鼠标移到某元素之上...现需要通过 js 代码实现阻止表单提交功能,js 代码实现如下: 获取 form 表单元素对象。 给 form 表单元素对象绑定 onsubmit 事件,并绑定匿名函数。...不需要,只需要对之前校验代码进行改造,把每个校验代码专门抽象到有名字函数中,方便调用;并且每个函数都要返回结果来去决定是提交表单还是阻止表单提交,代码如下: //1....绑定onsubmit 事件 regForm.onsubmit = function () { //挨个判断每一个表单项是否都符合要求,如果有一个不合符,则返回false var flag...绑定onsubmit 事件 regForm.onsubmit = function () { //挨个判断每一个表单项是否都符合要求,如果有一个不合符,则返回false

7.5K10

JS常用设计模式解析02-策略模式

不过实际业务中,策略模式并不只是封装算法,如果一系列业务规则指向目标一致,并且可以互相替换使用,我们都可以用策略模式来封装它们。下面我们举几个策略模式使用场景,让大家详细体会一下。 2....使用策略模式实现表单校验 表单校验是一个很常见需求,假设你需要为一个网站编写注册模块。...registerForm.onsubmit 函数缺乏弹性,如果增加了一种新校验规则,或者想把密码校验长度从6改为8,我们都必须深入registerForm.onsubmit 函数内部实现,这是违反开放...算法复用性差,如果在程序中增加了另外一个表单,这个表单也需要进行一些类似的校验,那么我们很可能随处都可见这些校验逻辑规则复制。 下面,我们使用策略模式来实现表单校验。 <!...美中不足是,如果我们要为一个输入框添加多个规则时,需要重复调用多次add。那么有没有办法,只用调用一次add就可以为输入框添加多种规则呢? <!

78230

form实现表单提交各种方法(表单提交源码)

提交 这种方法实际上是调用一个javascript函数,使用javacript函数来提交表单,方法就非常多非常灵活了,比如可以把它加入到任意一个标签onclick事件中:...比如一个表单提交按钮所指向处理页面不同,这样由于表单在定义时候就已经确定下表单数据处理页面,所以单纯地在表单里放多个提交按钮是没有办法达到目的。这就需要javascript。...,而提交功能实现方法是在它onclick事件中调用javascript函数....当不写type属性时,其type默认值是submit,点击的话也会直接提交数据 使用formonsubmit()方法对表单数据进行 验证后 再提交 <form id="form1" action="...()方法,它会在“提交”按钮点击<em>的</em>时候<em>被</em>触发,该方法一定要有return返回值,如果值为false则不进行提交,如果为true则提交。

4.4K30

如何防止表单重复提交

问题 在看Java Web 深入分析时, 看到表单重复提交问题一节, 如下描述如何解决问题: 要防止表单重复提交, 就要标识用户一次访问请求, 使得每一次访问对服务端来说都是唯一....为了标识用户每次访问请求, 可以在用户请求一个表单域时,增加一个隐藏表单项, 这个表单值每一次都是唯一token....但是让我迷惑是: 访问服务器时获得唯一token标识, 然后提交时带上这个标志, 服务器检测是否和自己Session中内容一致. 为什么这样就可以防止重复提交?...我提交第二次, 第三次还是带有相同token啊, 服务器检测Session中内容应该还是一致. 为什么可以防止重复提交?..."); return false; } } ......

2.7K40

表单开发』一次即通关5个技巧

笔者目前正在开发一个涉及较多表单场景新项目。但由于是新项目进度赶,产品人员紧缺,表单需求往往没有考虑得很周全。...那作为一名前端开发,如何辅助产品尽可能让表单需求一次即通关,减少反复沟通以及提缺陷修缺陷时间,从而加快项目进度?...不小心点击关闭页面时,要提示让用户确认 业务场景:当用户在填写一个表单时,手误点了关闭页面或者点击去到其他页面。 导致问题:用户花时间填写表单数据会丢失,用户又要重新填一遍。用户体验大大降低。...,就能一次即通关表单开发需求,减少与产品测试反复沟通时间,加快项目的进度。...不然等到产品或测试临下班前发现这些问题时,会出现这样场景:开发拖着对着屏幕敲代码修缺陷,测试重新打开缺陷,反复循环N次。

62720
领券