HTML页面制作---信息的校验

最新推荐文章于 2024-07-09 17:01:34 发布
最新推荐文章于 2024-07-09 17:01:34 发布
阅读量983 收藏 3
点赞数
文章标签： html css js javascript
liaozhongmin
本文链接：https://blog.csdn.net/weixin_46345400/article/details/107446898
版权

1.HTML信息校验代码

<html>
	<head>
		<meta charset="utf-8">
		<title>Music Login Form</title>
		<!--css代码声明-->
		<style type="text/css">
			#showdiv{
				width: 530px;
				height: 520px;
				border: solid 2px grey;
				border-radius: 10px;
				margin: auto;
				margin-top: 10px;
				margin-left: 230px;
			}
			table{
				margin: auto;
				color: white;
				font-family: "Consolas";
				margin-top: 10px;
			}
			span{
				font-size: 13px;
			}
			#codeSpan{
				font-size: 20px;
			}
			body{
				background: url(img/backgroud.jpg);
				background-repeat: no-repeat;
				background-size: cover;
			}
			tr{
				height: 35px;
			}
			input[type=text]{
				border-radius: 10px;
			}
			input[type=password]{
				border-radius: 10px;
			}
			h3{
				color: white;
				font-family: "Brush Script MT";
				font-size: 30px;
			}
		</style>
		<!--js代码声明-->
		<script type="text/javascript">
		//验证码
			function creatCode(){
				//获得四位随机数
				var code=Math.floor(Math.random()*9000+1000);
				//获取span对象
				var span=document.getElementById("codeSpan");
				//把随机数赋值给span
				span.innerHTML=code;
			}
		//验证用户名
			function checkUname(){
				//获取用户信息
					var uname=document.getElementById("uname").value;
				//制定校验规则
					var reg=/^[a-zA-Z]{1,10}$/
				//获取span对象
					var span=document.getElementById("unameSpan");
				//开始校验
					if(uname=="" || uname==null){
						//得出校验结果
						span.innerHTML="*The user name cannot be empty";
						span.style.color="red";
						return false;
					}else if(reg.test(uname)){
						//得出校验结果
						span.innerHTML="*Legitimate user";
						span.style.color="green";
						return true;
					}else{
						//得出校验结果
						span.innerHTML="*Out of specification";
						span.style.color="red";
						return false;
					}	
			}
		//验证密码
			function checkPwd(){
				//获取用户密码
					var pwd=document.getElementById("pwd").value;
				//制定验证信息
					var reg=/^[a-z][\w]{5,7}$/
				//获取span对象
					var span=document.getElementById("pwdSpan");
				//得出校验结果
					if(pwd=="" || pwd==null){
						span.innerHTML="*The password cannot be empty";
						span.style.color="red";
						return false;
					}else if(reg.test(pwd)){
						span.innerHTML="*Legitimate password";
						span.style.color="green";
						return true;
					}else{
						span.innerHTML="*Out of specification";
						span.style.color="red";
						return false;
					}
					checkConfirm();
			}
		//验证确认密码
			function checkConfirm(){
				//获取第一次密码
					var pwd=document.getElementById("pwd").value;
				//获取确认密码
					var confirm=document.getElementById("confirm").value;
				//获取span对象
					var span=document.getElementById("conSpan");
				//开始校验
				if(confirm=="" || confirm==null){
					//得出校验结果
					span.innerHTML="*Password can not be empty"
					span.style.color="red";
					return false;
				}else if(confirm==pwd){
					//得出校验结果
					span.innerHTML="*Both consistent";
					span.style.color="green";
					return true;
				}else{
					//得出校验结果
					span.innerHTML="*Not the same";
					span.style.color="red";
					return false;
				}
			}
		//验证电话
			function checkTel(){
				return	checkField("num",/^1[3,4,5,7,8]\d{9}$/);
			}
		//验证邮箱
			function checkMail(){
				return	checkField("mail",/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/);
			}
		/*------------------------封装--------------------------*/
			function checkField(id,reg){
				//获取用户信息
					var inp=document.getElementById(id);
					var va=inp.value;
					var alt=inp.alt;
				//获取span对象
					var span=document.getElementById(id+"Span");
				//得出验证结果
					if(va=="" || va==null){
						span.innerHTML="*The "+alt+" cannot be empty";
						span.style.color="red";
						return false;
					}else if(reg.test(va)){
						span.innerHTML="*Legitimate "+alt;
						span.style.color="green";
						return true;
					}else{
						span.innerHTML="*Out of specification";
						span.style.color="red";
						return false;
					}
			}
		 //验证籍贯
		 	function checkAddress(){
		 		//获取籍贯信息
		 			var choice=document.getElementById("address").value;
		 		//获取span对象
		 			var span=document.getElementById("addressSpan");
		 		//开始校验
		 			if(choice!=0){
		 				span.innerHTML="sucessed";
		 				span.style.color="green";
		 				return true;
		 			}else{
		 				span.innerHTML="please choice";
		 				span.style.color="red";
		 				return false;
		 			}
		 	}
		 //验证爱好
		 	function checkHobby(){
		 		//获取爱好信息
		 			var favs=document.getElementsByName("fav");
		 		//获取span对象
		 			var span=document.getElementById("favSpan");
		 		//开始校验
		 			for(var i=0;i<favs.length;i++){
		 				if(favs[i].checked){
		 					span.innerHTML="sucessed";
		 					span.style.color="green";
		 					return;
		 				}
		 			}
		 			span.innerHTML="Choose at least one";
		 			span.style.color="red";
		 			return false;
		 	}
		 //验证"self-introduction"
		 	function checkIntro(){
		 		//获取内容信息
		 			var intro=document.getElementById("intro").value;
		 		//获取span对象
		 			var span=document.getElementById("introSpan");
		 		//开始校验
		 				if( intro.length<=10){
		 				span.innerHTML="keep write";
		 				span.style.color="green";
		 			}else{
		 				span.innerHTML="More than words";
		 				span.style.color="red";
		 			}
		 	}
		 //验证码的校验
		 	function checkCode(){
		 		//获取验证码
		 			var codeSpan=document.getElementById("codeSpan");
		 		//获取输入的验证码
		 			var code=document.getElementById("code").value;
		 		//获取span对象
		 			var span=document.getElementById("showSpan");
		 			if(code=="" || code==null){
					//得出校验结果
					span.innerHTML="*code can not be empty"
					span.style.color="red";
					return false;
				}else if(code==codeSpan.innerHTML){
					//得出校验结果
					span.innerHTML="*Both consistent";
					span.style.color="green";
					return true;
				}else{
					//得出校验结果
					span.innerHTML="*Not the same";
					span.style.color="red";
					return false;
				}
			}
		 		
		 //"是否同意公司协议选项"与"立即注册一致"
		 	function checkAgree(){
		 		document.getElementById("sub").disabled=!document.getElementById("agree").checked;
		 	}
		 //填写完整信息后才能提交成功
		 	function checkSub(){
		 		checkUname();
		 		checkPwd();
		 		checkConfirm();
		 		checkTel();
		 		checkMail();
		 		checkAddress();
		 		checkHobby();
		 		checkCode();
		 		return checkUname()&&checkPwd()&&checkConfirm()&&checkTel()&&checkMail()&&checkAddress()&&checkHobby()&&checkCode();
		 	}
		</script>
	</head>
	<body onload="creatCode()">
		<h3 align="center">
				<span style="color: orange;font-size: 30px;">M</span>usic
				<span style="color: orange;font-size: 30px;">L</span>ogin
				<span style="color: orange;font-size: 30px;">F</span>orm
		</h3>
		<div id="showdiv">
			<form action="#" onsubmit="return checkSub()">
				<table>
					<tr >
						<td width="50px">Usename：</td>
						<td width="500px">
							<input type="text" name="uname" id="uname" value="" onblur="checkUname()"/><span id="unameSpan" >*Within ten words</span>
						</td>
					</tr>
					<tr >
						<td>Password：</td>
						<td >
							<input type="password" name="pwd" id="pwd" value="" onblur="checkPwd()"/><span id="pwdSpan"></span>
						</td>
					</tr>
					<tr >
						<td>Confirm：</td>
						<td >
							<input type="password" name="confirm" id="confirm" value="" onblur="checkConfirm()"/><span id="conSpan"></span>
						</td>
					</tr>
					<tr >
						<td>Tel：</td>
						<td >
							<input type="text" name="num" id="num" value="" alt="tel" onblur="checkTel()"/><span id="numSpan"></span>
						</td>
					</tr>
					<tr >
						<td>E-Mail：</td>
						<td >
							<input type="text" name="mail" id="mail" value="" alt="Mail" onblur="checkMail()"/><span id="mailSpan"></span>
						</td>
					</tr>
					<tr>
						<td>Gender：</td>
						<td >
							F<input type="radio" name="sex" id="" value="1" checked="checked"/>
							M<input type="radio" name="sex" id="" value="0" />
		
						</td>
					</tr>
					<tr>
						<td>Native Place：</td>
						<td >
							<select name="address" id="address" onchange="checkAddress()">
								<option value="0">--Choices--</option>
								<option value="1">北京</option>
								<option value="2">上海</option>
								<option value="3">广州</option>
								<option value="4">深圳</option>
								<option value="5">香港</option>
								<option value="5">南昌</option>
								<option value="6">赣州</option>
								<option value="7">瑞金</option>
								<option value="8">西安</option>
							</select><span id="addressSpan"></span>
						</td>
					</tr>
					<tr >
						<td>Hobby：</td>
						<td >
							<input type="checkbox" name="fav" id="" value="" onclick="checkHobby()"/>Game&nbsp;
							<input type="checkbox" name="fav" id="" value="" onclick="checkHobby()"/>Guitar
							<input type="checkbox" name="fav" id="" value="" onclick="checkHobby()"/>basketball
							<br />
							<input type="checkbox" name="fav" id="" value="" onclick="checkHobby()"/>Music
							<input type="checkbox" name="fav" id="" value="" onclick="checkHobby()"/>Movie&nbsp;
							<input type="checkbox" name="fav" id="" value="" onclick="checkHobby()"/>Running
							<span id="favSpan"></span>
						</td>
					</tr>
					<tr >
						<td>Self-introduction：</td>
						<td >
							<textarea name="intro" id="intro" rows="5" cols="30" onclick="checkIntro()"></textarea>
							<span id="introSpan"></span>
						</td>
					</tr>
					<tr >		
						<td>Identtifying code：</td>
						<td >
							<input type="text" name="code" id="code" value="" onblur="checkCode()"/>
							<span id="codeSpan" onclick="creatCode()" style="background: url(img/code.jpg.gif);color: black;"></span>
							<span id="showSpan"></span>
						</td>
					</tr>
					<tr >
						<td colspan="2" align="center">
							<input type="checkbox" name="" id="agree" value="1" onclick="checkAgree()"/><b>Do you agree the company agreement?</b>
						</td>
					</tr>
					<tr >
						<td colspan="2" align="center">
							<input type="submit" name="" id="sub" value="Register" disabled="disabled"/>
						</td>
					</tr>
				</table>
			</form>
		</div>
	</body>
</html>

2.可实现的功能

2.1 基本内容
1.展示整个页面，包括背景图，表格的样式，字体样式
2.每次输入的信息后正确input里span的值才会变“绿色”，“红色”表示不符合输入要求，提示用户重新输入
3.用户只有点击“是否同意公司协议”按钮“立即注册”按钮才能点击
4.若用户没按照要求填写内容，“立即注册”也会失效，也就是说不能提交form表单
2.2 页面展示
(1)下面是用户输入的信息全部全部正确时的结果，可以看到“绿色”提示，表明正确
在这里插入图片描述
(2)下面是用户没有完全填好信息或者完全没填信息时显示的效果，这两种情况下都提交不了form表单
在这里插入图片描述
(3) 制作过程资料
链接：https://pan.baidu.com/s/1I_gKfU1uknnrPn8-M5U8lg
提取码：g2ev

#HashMap#
关注
HTML JS表单校验
a97699的博客
11-26 1601
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;表单校验&lt;/title&gt; &lt;style &gt; l
基于HTML+CSS+JavaScript制作学生网页——龙猫 -宫崎骏 5页 带轮播 带js校验
而风不止
11-24 446
⛵✈网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 网页设计作业 | 动漫网页设计 | 动漫网页设计成品 | 动漫网页设计成品模板 | 简单漫画网页设计成品 | HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
html 校验
weixin_33918114的博客
07-29 121
input 仅能输入金额 onkeyup="value=value.replace(/[^\d.]/g,'')"
HTML5表单的自动验证、取消验证、自定义错误信息
pan_junbiao的博客
07-09 1313
通过在元素中使用属性的方法，该属性可以实现在表单提交时执行自动验证的功能。下面是关于对元素内输入内容进行限制的属性的指定。pattern 属性的主要目的是根据表单控件上设置的格式规则验证输入是否为有效格式。通过在 input 元素中使用pattern 属性，并将属性值设为某个格式的正则表达式，该属性实现在提交表单时会检查其内容是否符合给定格式。
html只允许输入的数据校验，只允许输入字母汉字数字等
weixin_34270606的博客
03-27 341
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &l
html校验
yingfeng612的专栏
01-13 942
正则表达式综合练习 多种信息格式验证
信息校验工具
baidu_35051056的博客
02-20 653
import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date; import java.util.GregorianCalendar; import java.util.Hashtable; import java.util.regex.Matcher; import java.util.r...
html注册页面带验证码,登陆注册-带图片的验证码
weixin_35843035的博客
06-03 2458
登陆注册时的验证码。 使用的是SpringMVC。 你如果用的其他框架，只需要getCode这个方法就行。业务逻辑：加载登陆注册页，生成验证码，把生成的验证码返回到前台页面展示，用户输入验证码进行登陆操作，把前台用户输入的验证码和后台生成的验证码进行比对。 成功进行登陆，失败返回错误和新的验证码。控制器代码：package com.shopping.view.web.tools;import ja...
html 数据校验,表单数据校验
weixin_30819373的博客
06-09 649
有时，例如使用旧版浏览器或自定义小部件，您将无法(或不希望)使用约束校验API。 在这种情况下，您仍然可以使用 JavaScript 来校验您的表单。 校验表单比起真实数据校验更像是一个用户界面问题。要校验表单，您必须问自己几个问题：我应该进行什么样的校验？你需要确定如何校验你的数据：字符串操作，类型转换，正则表达式等。这取决于你。 只要记住，表单数据一般都是文本，并总是以字符串形式提供给脚本。如...
在线html校验,HTML 标记校验
weixin_28807529的博客
06-03 505
Javascript 代码function validate(){str=(document.getElementById('exp')).value;if(str.match(/([\]{1,})*([\>])/i)==null)alert("No hay etiquetas HTML");elsealert("Contiene etiquetas HTML");}function ctc...
HTML5中的校验
天空守护云
02-20 289
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;script type="text/javascript"&gt;&l
用正则表达式简写一个前端的信息校验页面
weixin_43131104的博客
07-10 247
正则表达式小试牛刀
html表单校验函数,[无心插柳]简单实现常用的表单校验函数
weixin_34369657的博客
06-29 403
有意取而不得，失落而归。无意间有所获，未有喜悦，但珍惜依旧1.前言表单校验，相信绝大部分的开发者会遇到过，网上也有很多插件可使用。但当时想着就是简单的校验，没必要引插件，就自己写一个简单的函数。随着校验的需求多样化，函数越来越大。有点轮子的雏形，算是无心插柳吧。现在也该分享出来了，和大家交流交流。函数比较粗糙，如果大家有建议，评论留言吧。1.关于实现的过程，原理都是参考了《JavaScript设计...
GetElementById
我就吃一口的BLOG
12-10 944
GetElementById <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" > /* * 需求：当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法。<br/>
信息验证
weixin_43826111的博客
04-08 374
（1）身份验证 （2）电话号码验证
html在线校验器,HTML validate HTML验证
weixin_42427882的博客
05-30 971
HTML validate是指HTML验证。它是通过与标准HTML规则进行比较的方式，分析HTML文档、标记出错误和非标准代码的处理过程。Web页面使用HTML进行渲染，而HTML本身采用了HTML规范作为其规则和标准。通过验证HTML代码穿越多重浏览器标准！1、Web站点访问性：验证HTML代码帮助你找出那些微小的不规范之处，从而防止它们妨碍搜索引擎爬虫或者浏览者。这样使你的站点获得更多的浏览者...
js网页注册信息实时校验
Kevin1906的博客
01-09 223
js正则校验密码 正则基本知识：https://editor.csdn.net/md/?articleId=112318392 <!DOCTYPE html> <html> <head> <title>测试</title> <link rel="stylesheet" type="text/css" href="css/test.css"> </head> <body> 用户名：<input type=
HTML 表单验证
LMengi000的博客
05-11 679
&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="textml; charset=utf-8"&gt; &lt;title&gt;网页&lt;/title&gt; &lt;style type="text/css&quot
HTML前端表单校验的方法
日常学习总结
01-20 1821
HTML表单方式校验：Jquery Validate框架校验，JS手写校验
制作随机选号页面 1-60之间的随机整数
最新发布
10-01
制作一个随机选号页面，用于生成1到60之间的随机整数，通常涉及到前端和后端两个部分的配合。以下是简化的步骤： 1. **前端设计**： - 使用HTML创建一个界面，可以是一个按钮或输入框，用户点击后触发随机数的生成...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

#HashMap#

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

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

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

打赏作者

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

抵扣说明：

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

余额充值