form的onsubmit事件--表单提交前的验证实现方式

最新推荐文章于 2024-04-16 11:57:14 发布
最新推荐文章于 2024-04-16 11:57:14 发布
阅读量1.3w 收藏 5
点赞数 2
分类专栏： web前端 文章标签： 表单 javascript

onsubmit：表单提交前自动执行指定的东西；

注意： οnsubmit=“return check()”中的return是一定要加上的，不然check的返回值哪怕是false，仍然提交。也就是说，οnsubmit=“return false”为不执行提交；οnsubmit=“return true”或οnsubmit=“return ”都执行提交

主页面如下：

<HTML>

<HEAD>

<script type="text/javascript">

//form提交前，验证
function check(){
    if(验证条件不通过){
        return false;
    }else{

        return true;//不写此返回值也行，此时就直接提交了

    }
}
</script>

</HEAD>
<body >
<form id="queryForm" οnsubmit="return check()" action="/loginAction>

<input type="text" value=""/>

<input type="submit" id="submit" name="submit" style="visibility:hidden"/>

<HTML>


yb305小白
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue自定义表单生成器form-create使用详解
10-16
`form-create` 支持 Vue 的各种组件，并且提供了丰富的功能，如动态渲染、数据收集、验证以及表单提交。以下是对 `form-create` 的详细解析： ### 主要特性 1. **动态渲染** - 只需提供 JSON 配置，即可自动生成...
onsubmit阻止form表单提交与onclick的相关操作
09-05
总结，`onsubmit`事件和`return false`是JavaScript中控制表单提交的关键机制，它们允许开发者在表单提交前进行验证、交互等操作，提高了用户体验和数据安全性。正确理解和使用这两个特性对于后台编程人员至关重要，...
form提交前验证事件
Willian的博客屋
08-09 1050
在进行form表单提交操作时，我们经常会遇到提交前的校验问题，那么如何才能方便的解决呢？我们用form本身的提交前事件，就是onsubmit。 js代码部分： function validate(){ var tel= document.getElementById(&quot;telephone&quot;).value; if(tel== null || tel== ''){ ...
form 表单提交前验证
热门推荐
chelen_jak的专栏
07-30 1万+
原文出处：http://www.cnblogs.com/xudong-bupt/p/3949631.html 可以使用form表单的onsubmit方法，在提交表单之前，对表单或者网页中的数据进行检验。 onsubmit指定的方法返回true，则提交数据；返回false不提交数据。 直接看下面的代码： 1 HTML> 2 head> 3 m
15 php学习：表单验证
最新发布
百锦再的博客
04-16 6万+
因此，在密码验证规则中，需要综合考虑密码的长度要求、复杂性要求、确认验证、安全策略等方面的内容，以确保密码的安全性和用户友好性。通过有效的唯一性检查方法，可以确保系统数据的准确性和完整性，避免重复数据的存在，提高系统的性能和安全性。通过日期验证，可以确保用户输入的日期符合指定的格式和范围要求，从而提高数据的准确性和系统的安全性。表单验证在网页和应用程序开发中起着至关重要的作用，其主要目的是确保用户输入的数据符合预期的格式和规则，以提升用户体验、数据准确性和系统安全性。
form表单提交前做方法
feicongcong的博客
04-25 2028
方法一 保存 function tovalid(){ var str=$('#imgShow').find("img").attr("src"); var imgUrl=str.substring(0,str.lastIndexOf("?")); $("#avatars").val(imgUrl);
html form中onsubmit的使用
yiluoAK_47的专栏
03-21 1918
html form 中的onsubmit在点submit按钮时被触发，如果return false;则结果不会被提交到action中去（也就是提交动作不会发生），如果不返回或者返回true，则执行提交动作。（baidu也同理）,下面是一个例子程序 html form onsubmit使用 alert("加载此页面时执行"); function buttonSubmit(){ d
通过onsubmit进行表单验证
qq_36430299的博客
02-16 361
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 表单验证 function test1(){ var username = document.myForm
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
10-19
在网页开发中，表单验证是一项重要的任务，它确保用户输入的数据符合预期，避免无效或错误的数据被提交至服务器。本文将重点讲解如何使用JQuery进行表单提交前的验证，特别是针对单选框是否选中的检查，以及在执行...
ember-validated-form:通过客户端验证轻松创建表单
04-29
Ember-Validated-Form是一个基于Ember.js的添加剂，专为简化客户端表单验证而设计。这个库的目的是提供一种高效且用户友好的方式来处理表单输入的验证，确保在提交数据到服务器之前，所有必要的规则都已经满足。...
submit表单提交，onsubmit验证拦截
10-30
submit表单提交，onsubmit验证拦截 免去了用button按钮click点击事件ajax请求
了解form表单提交前验证，看这就够了
程序羊的博客
11-22 1157
可以使用form表单的onsubmit方法，在提交表单之前，对表单或者网页中的数据进行检验。 onsubmit指定的方法返回true，则提交数据；返回false不提交数据。 第一种写法： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="te...
前端 -＞ JavaScript 表单验证(onsubmit)
rod0320的博客
12-04 844
表单验证(onsubmit):先验证再提交到action,如果是false就不提交 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script> function validateForm() { let byId = document.
表单验证---Onsubmit 属性
qq_36336344的博客
03-18 519
表单提交——简单的上手 ——onsubmit属性 先简单的写一个验证的 check方法 form表单 提交按钮属性 type="submit" form表单的属性  action 提交URL的地址 这里的onsubmit="return check()" 是必要的的属性  验证不成功 返回
关于form提交事件
weixin_53983124的博客
04-03 1161
1.因为表单的默认提交事件，点击提交后会跳转页面，而具体跳转到哪是由表单的action属性决定的，如果action没有值或者没写action也会跳转，只是跳转到自己的页面，达到一个页面刷新的效果。由于表单的默认行为，导致我们控制台没有打印我们想要的结果，那么我阻止他的默认行为，这样我们就可以在控制台看到我们想要的结果了。2.表单中的按钮 如果没有去设置类型，那么默认 type=输出结果：刷新页面有 1 闪过。1.表单的事关于件监听。结果：控制台输出 1。
Form表单事件提交的几种方法
weixin_49756432的博客
06-07 3924
表单事件的提交分为同步提交和异步提交。 form属性:规定输入域所属的一个或多个表单。 注释：form 属性适用于所有 <input> 标签的类型。 form 属性必须引用所属表单的 id： 3.禁用表单自动提交方式：onsubmit=”return false;” 4.用javaScript方法来实现表单数据的获取和提交： ”get”: 可以通过形参的方式去接收。 1先在控制器中声明一个方法，再声明一个变量去接收用字符串拼接起来的属性值。 ...
form提交
u011927449的博客
01-18 494
方法一：利用form的onsubmit()函数（经常使用） Html代码 <scripttype="text/javascript"> functionvalidateForm...
form表单的提交以及触发方式
Huang_John的博客
10-22 9317
小程序里面有form表单组件，提交表单通过button提交，在form标签里添加bindsubmit事件，然后在button标签里面添加触发bindsubmit事件的属性：form-type=“submit”，就可以将表单提交到服务器了，需要注意的是button必须是要在form标签里面，例如： &lt;form bindsubmit="test"&gt; &lt;button form-ty...
关于form与表单提交操作
梦和远方的博客
05-06 1846
一个表单里面只要有form元素，如果没有给action加一个默认值，为空白的时候，当你刷新页面时，会弹出一个警告框提示你已经填入表单，刷新数据将会丢失。 如果一个表单里面有一个type="submit"的button、或者type="submit"的input，或者type="image"的input，点击则会触发表单提交动作。即使你使用了return false，按钮也还是会提交submit...
用onsubmit进行form表单验证
06-06
可以使用 onsubmit 属性来执行表单验证。这个属性定义在 form 元素上，可以在表单提交时调用 JavaScript 函数。当表单提交时，如果该函数返回 false，则表单不会提交。 以下是一个使用 onsubmit 属性进行表单验证的例子： HTML 代码： ``` <form id="myForm" action="submit.php" method="post" onsubmit="return validateForm()"> <label for="username">Username:</label> <input type="text" id="username" name="username"><br><br> <label for="password">Password:</label> <input type="password" id="password" name="password"><br><br> <input type="submit" value="Submit"> </form> ``` JavaScript 代码： ``` <script> function validateForm() { var username = document.getElementById("username").value; var password = document.getElementById("password").value; if (username == "") { alert("Username cannot be empty"); return false; } if (password == "") { alert("Password cannot be empty"); return false; } return true; } </script> ``` 在这个例子中，我们在 form 元素上定义了 onsubmit 属性，值为 validateForm() 函数。当表单提交时，会调用这个函数进行验证。如果用户名或密码为空，会弹出一个警告框，并返回 false，阻止表单提交。如果验证通过，会返回 true，表单会继续提交。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值