案例四：注册表单提交验证的完善

最新推荐文章于 2023-01-17 22:28:28 发布
最新推荐文章于 2023-01-17 22:28:28 发布
阅读量611 收藏 2
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhanshixiang/article/details/90523917
版权

用户提交信息以后对每一个输入框进行验证。并提示

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>注册页面</title>
		<script>
			function checkForm() {
				//	 alert("aaa");
				//校验用户名
				//1.获取用户输入的数据
				var uValue = document.getElementById("user").value;
				//alert(uValue);
				if (uValue == "") {
					alert("用户名不能为空。")
					return false;
				}
				//校验密码信息
				var pValue = document.getElementById("password").value;
				
				if (pValue == "") {
					alert("密码不能为空")
					return false;
				}
				var rpValue=document.getElementById("repassword").value;
				if(rpValue==""){
					alert("第二次输入的密码为空，请重新输入");
					return false;
				}else if (pValue !=rpValue) {
					
					alert("两次密码输入不一致，请重新输入");
					return false;
				}
				
				//校验邮箱
				var eValue=document.getElementById("eamil").value;
				
				if (eValue=="") {
					alert("邮箱不能为空，请重新输入");
					
				} else if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
				 alert("邮箱格式不正确，请检查后输入");	
				}
				
			}
		</script>
	</head>

	<body>
		<table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
			<!--1.logo部分-->
			<tr>
				<td>
					<!--嵌套一个一行三列的表格-->
					<table border="1px" width="100%">
						<tr height="50px">
							<td width="33.3%">
								<img src="../img/logo2.png" height="47px" />
							</td>
							<td width="33.3%">
								<img src="../img/header.png" height="47px" />
							</td>
							<td width="33.3%">
								<a href="#">登录</a>
								<a href="#">注册</a>
								<a href="#">购物车</a>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<!--2.导航栏部分-->
			<tr height="50px">
				<td bgcolor="black">
					&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#">
						<font size="5" color="white">首页</font>
					</a> &nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#">
						<font color="white">手机数码</font>
					</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#">
						<font color="white">电脑办公</font>
					</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#">
						<font color="white">鞋靴箱包</font>
					</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#">
						<font color="white">家用电器</font>
					</a>
				</td>
			</tr>
			<!--3.注册表单-->
			<tr>
				<td height="600px" background="../img/regist_bg.jpg">
					<!--嵌套一个十行二列的表格-->
					<form action="#" method="get" name="regForm" onsubmit="return checkForm()">
						<table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
							<tr height="40px">
								<td colspan="2">
									<font size="4">会员注册</font> &nbsp;&nbsp;&nbsp;USER REGISTER
								</td>
							</tr>
							<tr>
								<td>
									用户名
								</td>
								<td>
									<input type="text" name="user" size="34px" id="user" />
								</td>
							</tr>
							<tr>
								<td>
									密码
								</td>
								<td>
									<input type="password" name="password" size="34px" id="password" />
								</td>
							</tr>
							<tr>
								<td>
									确认密码
								</td>
								<td>
									<input type="password" name="repassword" size="34px" id="repassword"></input>
								</td>
							</tr>
							<tr>
								<td>
									Emaile
								</td>
								<td>
									<input type="text" name="email" size="34px" id="eamil" />
								</td>
							</tr>
							<tr>
								<td>
									姓名
								</td>
								<td>
									<input type="text" name="username" size="34px" />
								</td>
							</tr>
							<tr>
								<td>
									性别
								</td>
								<td>
									<input type="radio" name="sex" value="男" />男
									<input type="radio" name="sex" value="女" />女
								</td>
							</tr>
							<tr>
								<td>
									出生日期
								</td>
								<td>
									<input type="text" name="birthday" size="34px" />
								</td>
							</tr>
							<tr>
								<td>
									验证码
								</td>
								<td>
									<input type="text" name="yzm" />
									<img src="../img/yanzhengma.png" />
								</td>
							</tr>
							<tr>
								<td colspan="2">
									<input type="submit" value="注册" />
								</td>
							</tr>
						</table>
					</form>
				</td>
			</tr>
			<!--4.广告图片-->
			<tr>
				<td>
					<img src="../img/footer.jpg" width="100%" />
				</td>
			</tr>
			<!--5.友情链接和版权信息-->
			<tr>
				<td align="center">
					<a href="#">关于我们</a>
					<a href="#">联系我们</a>
					<a href="#">招贤纳士</a>
					<a href="#">法律声明</a>
					<a href="#">友情链接</a>
					<a href="#">支付方式</a>
					<a href="#">配送方式</a>
					<a href="#">服务声明</a>
					<a href="#">广告声明</a>
					<p>
						Copyright © 2005-2016 版权所有
					</p>
				</td>
			</tr>
		</table>
	</body>

</html>

 

真香号
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
微信小程序表单验证.rar
10-19
在本案例中，我们关注的是名为“微信小程序表单验证.rar”的压缩包，它包含了一个名为“WxValidate”的插件，用于帮助开发者执行自定义的表单验证。 `WxValidate`插件是社区开发者为了解决微信小程序中表单验证问题...
form表单的多种提交方式及提交前验证
qq_42128262的博客
06-21 2万+
以下是本人总结处来的一些form的提交方式，网上还有别的提交方式，这里我总结了大小分为7类，其实就是三类的提交方式，若有哪里不对的，还请评论指出来，大家一起学习学习 1、无任何验证提交（最普通的提交） 该方式不提供任何的验证方式，当我们点击提交时（提交的前提一定是 <input> 的type="submit"或者加粗样式<button>的type=“submit”） for...
了解form表单提交前验证，看这就够了
程序羊的博客
11-22 1155
可以使用form表单的onsubmit方法，在提交表单之前，对表单或者网页中的数据进行检验。 onsubmit指定的方法返回true，则提交数据；返回false不提交数据。 第一种写法： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="te...
form表单的集中提交方法
09-03 360
最近研究了下html中，form保单提交的几种方法 方法一：利用form的onsubmit()函数（经常使用） Html代码 <scripttype="text/javascript"> functionvalidateForm(){ if(document.reply.title.value==""){/...
11.vue实战--form表单字段验证提交验证
dream_back的博客
03-20 1804
一.form表单字段验证 Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可 1.form中的rules属性绑定rules 2.form-item中的prop绑定对应的字段 3.在data中return对应的返回规则 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-rule
form表单提交前验证
xjt_1993的博客
11-15 589
第一种方式:          function check(form) {           if(form.userId.value=='') {                 alert("请输入用户帐号!");                 form.userId.focus();                 return false;           
JS用户反馈表单提交代码
07-24
在JavaScript（JS）中，创建一个用户反馈表单提交功能是一项常见的任务，它涉及到前端交互设计和后端数据处理。本项目"JS用户反馈表单提交代码"提供了一个具有星空背景的用户反馈表单，旨在增强用户体验并收集有价值...
jquery带提示验证表单.zip
07-05
然后，可以使用`.on()`方法绑定事件，例如，为表单提交事件绑定验证函数： ```javascript $("#myForm").on("submit", function(event) { // 验证逻辑 }); ``` 3. **获取表单数据**：在验证函数内，我们可以...
jQuery注册登录改密表单特效代码
03-20
【jQuery注册登录改密表单特效代码】是一个实用的前端开发资源，主要针对网页中的用户...总的来说，这个代码包为创建功能完善的用户管理界面提供了一个很好的起点，适用于快速开发或作为学习jQuery交互设计的实践案例。
Transparent-Login-Form:登录表单
03-27
"Transparent-Login-Form"是一个基于CSS和HTML的登录表单设计项目，旨在创建一个具有透明背景和现代感的用户登录界面。...通过研究和实践这个项目，开发者可以深入理解如何创建美观且功能完善的登录表单。
用户注册表单提交验证
08-31
javascript表单提交 用户名以及密码验证的正则表达式
表单注册验证例子
10-06
这是一个表单注册验证的一个例子，在验证过程中有许多验证条件，需要通过才能完成注册。
JQuery实现表单完全验证通过后提交表单（包括手机验证，邮编验证）
12-03
很多时候我们在提交表单时都需要对提交的数据进行校验，例如：用户名是否为空，手机格式是否正确...,如果有一项或多项验证不通过，就会给出提示，并不允许表单提交。本人还是初级王，代码写的水平不高，但是还是能实现功能的。
Form表单验证
weixin_30664539的博客
08-23 5466
Form表单提交前js验证 1. Onclick() 2. Onsubmit() Button标签input (属性submit button )标签 Input type=button 定义按钮，没有任何行为。多数情况下，用于通过javascript启动脚本 Input type=submit定义提交按钮，提交按钮会把表单数据发送到服务器 1. oncli...
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
注册表单验证
最新发布
m0_74348480的博客
01-17 456
注册表单验证
form表单校验
m0_65132206的博客
05-19 7674
表单校验的基本步骤--简单校验,可以在基础上添加if判断校验成功跳转路由......
jsp中表单提交注册信息，提交信息之前先进行正则匹配，验证用户输入的信息是否符合规范要求。
热门推荐
凌世宇
05-30 3万+
  今天写了一个jsp的注册页面，用户每次输完一个输入框的内容，就会进行验证用户输入信息的格式是否符合规范，符合规范之后表单才进行提交，不符合规范则提醒用户按要求输入信息。直到用户输入的每个信息都符合要求，表单才提交，才进行验证。避免了提交之后，我还需要对信息提前进行一定的判断，是否符合要求，才进行数据库的插入操作。  说了这么多，还是先说一说我的思路吧。  1.首先我的页面有五个框，第一个框是用...
Spring MVC处理表单的实例分析.docx
06-19
"本文将深入探讨Spring MVC框架如何处理表单提交，以一个具体的注册功能为例，详细解析控制器类SpitterController.java中的关键代码和方法。在Web应用中，表单处理是用户交互的重要部分，包括显示表单和处理用户输入...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

真香号

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值