form表单当满足条件之后才提交表单的方法

最新推荐文章于 2023-04-04 10:33:11 发布
最新推荐文章于 2023-04-04 10:33:11 发布
阅读量4.5k 收藏 10
点赞数 3
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37962204/article/details/84201100
版权

使用form表单的onsubmit属性，当属性值为true时，则提交，当属性值为false时，则不提交：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>

	function judge() {
		var username = document.getElementById("username").value;
		var pwd = document.getElementById("password").value;
		var conpwd = document.getElementById("confirmPassword").value; 
		if(username == "")
		{
			alert("用户名不能问空！");
			return false;
		}
		else if(pwd!=conpwd)
		{
			alert("两次输入的密码不一致！");
			return false;
		}
		else
			return true;
	}
</script>
<h1 align="center">注册页	面</h1>
<form action="RegisterValidate" method="post" onsubmit="return judge()">
<p align="center">
用&nbsp;&nbsp;户&nbsp;&nbsp;名：<input type="text" id="username" name="username" placeholder="输入20个字符以内">
</p>
<p align="center">
输入密码：<input type="password" name="password" id="password" placeholder="输入20个字符以内">
</p>
<p align="center">
确认密码：<input type="password" name="confirmPassword" id="confirmPassword" placeholder="重新输入密码">
</p>
<p align="center">
<input type="submit" value="注册">
<input type="reset" value="重置">
</p>
</form>
</body>
</html>

 

一叶知秋-
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
表单带前置条件验证
代码青春
09-07 180
表单带前置条件验证
form表单符合要求后才能提交
静下心来，认真的研究技术。
10-19 1649
下面的代码是验证form中的电子邮件，只有电子邮件符合要求才执行form跳转 ----------------------------------------------------------------------------------------------------------------------------------------------------------- <br /> 邮件email:
form表单提交规则
红狼大大的博客
11-02 608
1、提交元素的name与获取的name不符–request.getParameter(name) 2、传递的值为空 3、form没有嵌套input 4、form加了enctype="multipart/form-data"属性 失误在了第一条规则上，忘了给标签加上name，结果做了很多无用功 =.= 伤心的一批 ...
jsp中表单提交注册信息，提交信息之前先进行正则匹配，验证用户输入的信息是否符合规范要求。
凌世宇
05-30 3万+
  今天写了一个jsp的注册页面，用户每次输完一个输入框的内容，就会进行验证用户输入信息的格式是否符合规范，符合规范之后表单才进行提交，不符合规范则提醒用户按要求输入信息。直到用户输入的每个信息都符合要求，表单才提交，才进行验证。避免了提交之后，我还需要对信息提前进行一定的判断，是否符合要求，才进行数据库的插入操作。  说了这么多，还是先说一说我的思路吧。  1.首先我的页面有五个框，第一个框是用...
提交Form表单,submit之前做js判断处理
迟迟 CSDN
03-23 3万+
效果:在点击提交按钮时,首先进行js判断, 如果不符合条件,则alert出提示信息,并return false.主要点就在于给form表单添加一个onsubmit事件. 在onsubmit事件中定义的函数里进行js验证处理.代码 : &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF...
Form表单按回车自动提交表单的实现方法
11-28
当form表单中只有一个<input type=”text” name=’name’ />时按回车键将会自动将表单提交。 <form id='form1' action='a1.jsp' method='post'> <input type='text' name='name' /> </form&...
js 提交form表单和设置form表单请求路径的实现方法
01-19
如下所示： form表单ID：postform 设置表单请求url document.postform.action = SaveReturnInfo...以上就是小编为大家带来的js 提交form表单和设置form表单请求路径的实现方法全部内容了，希望大家多多支持软件开发网~
layui form表单提交之后重新加载数据表格的方法
10-16
今天小编就为大家分享一篇layui form表单提交之后重新加载数据表格的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
js提交form表单,并传递参数的实现方法
10-22
下面小编就为大家带来一篇js提交form表单,并传递参数的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
form表单中的Input使用disabled不能提交的解决方法
09-22
form表单中的Input使用disabled导致不能提交，经测试终有一解，具体如下，希望遇到类似问题的朋友可以参考下，希望对大家有所帮助
条件判断式
一个搬运知识的笨小孩
02-25 506
1. 条件判断式 1.1 利用 if…then if…then是最常见的条件判断式，当符合某个条件判断的时候，就予以进行某项任务 1.1.0 单层、简单条件判断式
element ui form表单动态prop规则校验问题
hbjiankely的博客
03-30 5077
应用场景如图： 选择第三方平台右侧计费规则非必选 选择手动配置，右侧计费规则必选 解决方案 1. rules校验规则 stationFeeType: [{ required: true, message: '请选择计费配置方式', trigger: 'change' }] 2. prop动态，...
表单防止自动提交及onSubmit解析
lwj_199011的博客
12-24 692
form自动提交是指按回车键后，自动提交表单，为防止自动提交表单，可以在标签中添加事件属性onSubmit = "return false",这样回车提交表单就不会起作用了。 现在对自动提交表单的情形作一下测试： 1. username: 这种情况会自动提交表单，但是加上onSubmit="return false"之后，就不会了。这是最典型的情况 2.表单中有多个文本框
vue使用element-ui组件，通过el-form进行表单提交
追梦i
09-25 7701
1.新建api文件夹，该文件夹中主要存放接口路径。新建request.js,该js主要用于接口存放路径。 import axios from 'axios' /** * 封装axios请求 */ // create an axios instance const service = axios.create({ baseURL: 'http://localhost:8001/order/',//本地请求路径 timeout: 5000 // request timeout }) //
Form表单提交数据的几种方式
Amelian的博客
06-24 3万+
1. submit提交 在form标签中添加Action（提交的地址）和method（post），且有一个submit按钮（<input stype=“submit”>)，通过点击这个按钮提交表单数据 -type=”submit“是将表单提交(即form.submit()方法)作为其onclick后的默认事件 type=”submit“会自动将所具有的name属性html输入的元素（包括input、button、select等标签都作为键值对提交） type=”submit“submit会有一
Form表单事件提交的几种方法
weixin_49756432的博客
06-07 3931
表单事件的提交分为同步提交和异步提交。 form属性:规定输入域所属的一个或多个表单。 注释：form 属性适用于所有 <input> 标签的类型。 form 属性必须引用所属表单的 id： 3.禁用表单自动提交方式：onsubmit=”return false;” 4.用javaScript方法来实现表单数据的获取和提交： ”get”: 可以通过形参的方式去接收。 1先在控制器中声明一个方法，再声明一个变量去接收用字符串拼接起来的属性值。 ...
element-plus的form表单验证Prop和Rules设置约定
最新发布
04-04 3100
模型的数组结构skills验证时通过props ="skills[0].name" 或props ="skills.0.name"来定义path都是有效的,但无法正确获取到rules中对应的规则;<el-form-item prop="name" label="角色名称">可以定义成<el-form-item prop="name" :rules= "rules.nameAgain" label="角色名称"> 此时通过model.name查找值，通过rules.nameAgain查找验证规则。
element-ui 表单组件的prop属性
热门推荐
qq469234155的博客
11-13 8万+
Vue组件库element-ui中的Form表单组件提供了表单验证功能 通过rules属性传入验证规则 Form-Item中的prop属性设置需要校验的字段名 如图所示，el-form-item元素的prop属性绑定字段名name，表单验证时，就会验证el-input元素绑定的变量ruleForm.name的值是否符合验证规则 官方文档对表单属性prop的说明： ......
form表单的多种提交方式及提交前验证
qq_42128262的博客
06-21 2万+
以下是本人总结处来的一些form的提交方式，网上还有别的提交方式，这里我总结了大小分为7类，其实就是三类的提交方式，若有哪里不对的，还请评论指出来，大家一起学习学习 1、无任何验证提交（最普通的提交） 该方式不提供任何的验证方式，当我们点击提交时（提交的前提一定是 <input> 的type="submit"或者加粗样式<button>的type=“submit”） for...
form表单上传文件重写提交方法
03-22
可以使用 JavaScript 来重写 form 表单的提交方法，具体代码如下： ```javascript document.getElementById("formId").addEventListener("submit", function(event) { event.preventDefault(); // 阻止默认的提交行为 var formData = new FormData(this); // 获取表单数据 // 在这里可以对表单数据进行处理 // ... // 使用 AJAX 提交表单数据 var xhr = new XMLHttpRequest(); xhr.open("POST", this.action); xhr.send(formData); }); ``` 其中，`formId` 是表单的 ID，`this.action` 是表单的提交地址。在这段代码中，我们使用了 `addEventListener` 方法来监听表单的提交事件，然后使用 `FormData` 对象来获取表单数据，最后使用 AJAX 技术将表单数据提交到服务器。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值