使用js表单验证中的onsubmit属性

于 2022-06-04 16:25:56 发布
阅读量1.5k 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56451725/article/details/125122676
本文探讨了onsubmit事件在表单提交时的作用，以及在JavaScript验证中如何利用其返回值控制页面跳转。常见的onsubmit失效问题包括事件绑定格式错误、函数名拼写错误、值获取方式不当等。作者分享了自己因复制事件名导致onsubmit不生效的错误经历，并提醒开发者注意手写事件名以避免类似问题。文章旨在帮助开发者排查和解决onsubmit事件不生效的常见问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

onsubmit的作用:组织表单数据的提交，如果onsubmit的值为true，则会跳转到指定页面，反之不会跳转，一般在js验证中使用,给js验证设定返回值true或false;

使用onsubmit时通常会出现无效的问题，一般有如下情况：

1、格式：onsubmit="return checkForm()"

2、js的函数名不要写错

3、注意js中获取的值是id还是name,以避免获取不到值、

4、onsubmit这个事件名不要复制，要手打；

我这次犯的错误就是复制的，使得onsubmit事件一直不生效；

不生效的话onsubmit事件名下有黄色警告

最后，希望我对自己犯过错误总结能够帮助到大家。

琴枫＆
关注
JS表单验证会员信息填写代码
04-07
JavaScript（简称JS）是网页开发中用于实现客户端交互的重要脚本语言，特别是在处理表单验证时，它能提供实时、动态的用户输入检查，避免无效或不完整的数据被提交到服务器。本文将深入探讨如何使用JS进行表单验证，...
javascript表单验证使用示例(javascript验证邮箱)
10-26
JavaScript 表单验证是网页开发中一种常见的技术，它允许开发者在用户提交数据到服务器之前对用户输入的数据进行检查，确保其格式正确、合法。这不仅提高了用户体验，减少了无效请求，也减轻了服务器端的处理压力。...
js中onsubmit用法
weixin_42232623的博客
05-20 9447
在写表单处理的时候，经常会用到onSubmit事件，而onSubmit事件经常用到return关键字，比如： <!DOCTYPE html> <html> <head> <title>onsubmit用户提交,submit属性,事件</title> </head> <script type="text/javascri...
onSubmit的使用
青青子呤，悠悠我心
11-20 347
在web开发中，我们经常会遇到，一点回车键表单就自己提交的问题，能不能禁用回车键呢，答案是肯定的. [code="html"] ............... [/code] 如果想在表单提交时，进行验证 [code="html"] function check() { //验证不通过时 return false; } ...
form的onsubmit验证
热门推荐
在你最感兴趣的事物上，隐藏着你人生的秘密
01-30 2万+
网页表单的提交可以有多种方法实现。         可以用javascript写个提交的方法，在button的onclick中触发。也可以将input的type设置成submit，并对form进行action 和method设置,直接进行提交。         一般在提交表单之前都需要进行一些判断，如果使用第一种方法，那么这些判断就写到提交时触发的的Javasceipt的方法里就行。如果使用第
onSubmit="" 属性
weixin_34210740的博客
08-27 160
onsubmit 事件会在表单中的 提交表单 按钮被点击时发生。 当用点击按钮，提交表单执行前，就会发生此事件。此事件一般是调用JS函数来判断时否继续提交表单。onsubmit可以接收所调有函数的返回值（true/false)，如果真，继续提交表单；如果假，中止提交。 例： JS函数： function jiancha0() {　　var ab1 = document.getEleme...
表单验证---Onsubmit 属性
qq_36336344的博客
03-18 609
表单提交——简单的上手 ——onsubmit属性 先简单的写一个验证的 check方法 form表单 提交按钮属性 type="submit" form表单的属性  action 提交URL的地址 这里的onsubmit="return check()" 是必要的的属性  验证不成功 返回
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
10-20
JavaScript表单验证主要分为客户端验证和服务器端验证。客户端验证是即时的，可以在数据提交服务器前进行初步验证，提升用户体验。服务器端验证是必须的，因为客户端验证可以被绕过，不能完全依赖于客户端验证来保证...
使用JavaScript实现一个“表单验证”的功能.rar
最新发布
11-25
在实现一个基本的JavaScript表单验证功能时，可以按照以下步骤进行： 1. 确定需要验证的表单元素和验证规则。例如，一个注册表单可能需要验证用户名、密码、邮箱、确认密码等字段。 2. 为每个表单元素编写验证规则...
JavaScript表单验证完美代码
10-20
在讲解JavaScript表单验证的完美代码之前，首先需要了解在前端开发中表单验证的重要性。表单验证是确保用户输入数据的正确性和完整性的重要手段，它能够防止无效或恶意的数据对后端服务器造成损害。JavaScript表单...
form表单中onsubmit属性的作用
curry_du的专栏
08-02 3648
onsubmit 属性指定了一个事件句柄函数。当用户单击了表单中的 Submit 按钮而提交一个表单时，就会调用这个事件句柄函数。 如果 onsubmit 句柄返回 fasle，表单的元素就不会提交。如果该函数返回其他值或什么都没有返回，则表单会被提交。 这一特性使得该事件句柄函数适用于做表单提交前的验证。 如：onsubmit="return Check()" 这里有个return C
JavaScript中onsubmit事件
weixin_47511190的博客
07-12 1200
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--font标签是字体标签，可以修改文本的字体、颜色、大小--> <font color="red" size="7" face="宋体">我是字体标签<
js 提交 之 onSubmit 使用方法
小亮子的博客
06-23 1469
&lt;form action="user.php" method="post" name="getappraise" onSubmit="return appraisetishi();"&gt; &lt;textarea name="pingyu" id="pingyu" cols="30" rows="10" pl
HTML onsubmit 事件属性
evilcry2012的专栏
05-22 1770
HTML onsubmit 事件属性 HTML 事件属性 实例 当提交表单时执行一段 JavaScript： onsubmit="checkForm()"> 亲自试一试 浏览器支持 IE Firefox Chrome Safari Opera          
Onsubmit是做什么的？
jcroad的博客
06-30 845
表单提交时验证的事件 onsubmit和action两个都是提交时出发的不过： onsubmit是在表单中的确认按钮被点击时出发的，一般是js函数， 而action是在按钮被点击之后出发的，一般是出发前台提交到后台的请求， 而引起后台的回应。大致看了一下你的代码，没有试过，建议你onsubmit="chkForm(this)"， 不要加return，另外检查你的chkFrom()函数有没
使用表单onsubmit属性进行表单提交前js判定
PfcHua的博客
06-12 979
项目是一个BBS论坛项目，需要在表单进行提交前判定标题是否为空，若为空的话则不允许进行提交。 一般的处理方式为：发布主题然后在submitForm()函数内部进行提交前的判定，最后进行提交或者输出提示后不提交。 但是感觉这样代码混杂度更高，使用onsubmit属性应该会使代码更加简洁。而且也不用手动调用submit()方法。 我的表单是这样的： onsubmit="return check
前端 -＞ JavaScript 表单验证(onsubmit)
rod0320的博客
12-04 935
表单验证(onsubmit):先验证再提交到action,如果是false就不提交 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script> function validateForm() { let byId = document.
js 通用表单提交1-onsubmit
leiting084的专栏
02-12 853
在进行表单提交的时候，如果直接点击表单的submit按钮则会提交表单，但是这种方法在需要验证的时候则会不适用。 因此一般会在form的声明中声明onsubmit的方法，在这个方法中添加需要验证的字段等。 方法如下： 1、form表单 <form id='form1' action='' method='' omsubmit='return checkForm()'> <input type='text' name='username' value=''/> <inp
form 表单 onsubmit 属性
哈
06-23 1885
Html中form表单有一个onsubmit属性： 当onsubmit的值为return true时，单击提交按钮，会直接打开action指定的连接 当onsubmit的值为return false时，单击提交按钮，不会直接打开action指定的连接 <html> <body> <form action="http://www.baidu.com" onsubmit="return true"> <input type="submit"/&g
使用JavaScript进行表单验证
在这个实例中，我们将深入探讨如何使用纯JavaScript来实现表单验证。 首先，表单由`<form>`标签创建，其`action`属性定义了数据提交的地址，`method`属性指定了提交方式（这里是POST），`enctype`设置了数据编码...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值