网页设计与网站规划 结课作业 制作注册表单 包含js判断 并输出结果

已于 2022-05-17 11:50:17 修改
阅读量745 收藏 1
点赞数 3
分类专栏： 网页设计与网站规划 文章标签： javascript html5 css3 前端
于 2021-12-12 11:41:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54499870/article/details/121884964
版权

终于肝完了

2022 5 17更新

图挂了，补张图；

当时只学了HTML 了解一点点js

写的不规范 不过效果个人认为还不错 

图片素材  在博客资源区下载

也可以自行修改，应该没问题

2021 12 16更新

批改完毕99分 

源码附上仅供学习

<!DOCTYPE html>
<html>
<head>
	<title>河南中医药大学仪仗队报名表单</title>

	<!-- CSS -->
	<style type="text/css">
		* {
            margin: 0;
            padding: 0;
        }
    
        #logo{
        	position: absolute;
        	top: 10px;
        	left: 10px;
        }
        #bg{
        	background-image: url(bg.jpg);
        	background-repeat: no-repeat;
        	background-size: 100%;
        	height:800px;
        	
        	
        }
        #biaodan{
        	width: 710px;
        	height:600px; 
        	border:2px solid #C0C0C0;
        	background-color: white;
        	opacity:0.9;
        	position: absolute;
        	top: 50px;
        	left: 800px;
        }
        form{width: 650px;
        	position: absolute;
        	left: 50px;
        	

        }
        span{
        	font-size: 3px;
        	color: red;       }
        	/*用透明度实现鼠标经过时提交按钮变亮*/
        #tijiao{
        	width: 90px;
        	height: 30px;
        	position: absolute;
        	left: 180px;
        	opacity: 0.8;

        }
        #tijiao:hover{
        	opacity:1;

        }
       
	</style>


	<!-- script -->
	<script type="text/javascript">
		// 如果全部输入正确弹出结果  输入错误则输出提示
		 function sub() {
		 	if(fxuehao()!=true||fmingzi()!=true||fyvanxi()!=true||fshouji()!=true||femail()===false)
		 		//加上判断语句,完结撒花,注意email可以为空,所以只要!=false就对
		 	{
		 		alert("您的输入有误,请重新输入后提交!");
		 	}
		 	else{
		 	let xhh=document.getElementById("xuehao").value;
		 	let xmm=document.getElementById("xingming").value;
		 	let yxx=document.getElementById("yvanxi").value;
  			let sex=document.querySelector("input[name='xingbie']:checked").value;//这一句又是卡死我 5555我还没复习数据结构
  			let sjj=document.getElementById("shouji").value;
		 	let emm=document.getElementById("email").value;
		 	let tcc=document.getElementById("techang").value;
		 	
		 	/*这是获取复选框的值.这也卡了半天,不过写过单选框,这个就容易了一些*/
		 	var obj = document.getElementsByName('yixiang');
 			console.log(obj);//这是控制台输出,通过这个得到值再给s
 			var s = '';
 			for (var i = 0; i < obj.length; i++) 
 			{
 			if (obj[i].checked) {
 				s += obj[i].value + ',';
 			}
 			}
 			//这是alert输出;其实用控制台输出上边就容易多了就是不好看
              alert("学号:" + xhh + ",姓名:"+ xmm +",院系:"+ yxx +",性别:"+ sex +",手机:"+ sjj +",邮箱:"+ emm +",特长爱好:"+ tcc +",报名意向:"+ s +"。");

		 	
         }

     }
		// 验证学号 
		function fxuehao(){
			let reg=/^20(((0|1)([0-9]))|(2[0-1]))\d{6}$/;//自己写的20开头最高21新生的学号
			let xh=document.getElementById("xuehao").value;
			if (!reg.test(xh)) {
				document.getElementById("axuehao").innerHTML="学号格式错误,应以2000-2021开头"
				return false;
			}
			else
			{
				document.getElementById("axuehao").innerHTML="√"
				return true;
			}
		}

		/*验证姓名,包含了少数民族,网上搜的正则
		let 定义局部变量*/
		/*搜着搜那第一个函数写好花了2小时*/
		 function fmingzi(){
		 	let reg=/(^[\u4e00-\u9fa5]{1}[\u4e00-\u9fa5\.·。]{0,18}[\u4e00-\u9fa5]{1}$)|(^[a-zA-Z]{1}[a-zA-Z\s]{0,18}[a-zA-Z]{1}$)/;
			let mingzi=document.getElementById("xingming").value;/*得到id是xindming的标签的内容赋值给mingzi*/
				if(!reg.test(mingzi))/*!reg.test()判断是否符合正则表达式*/
				{
		 		document.getElementById("axingming").innerHTML="姓名输入有误";/*不符合 在id为axingming的标记显示姓名输入有误*/
		 		return false;/*记录是否成功*/
		 		}
		 		else
		 		{
		 		document.getElementById("axingming").innerHTML="√";
		 		return true;
		 		}
		 		}

       //验证院系是否为空
		 function fyvanxi(){
		 let yx=document.getElementById("yvanxi").value;
		 if (yx==="") {
		 	document.getElementById("ayvanxi").innerHTML="请选择院系"
		 	return false;
		 }
		 else{

		 		document.getElementById("ayvanxi").innerHTML="√";
		 		return true;
		 }
		 }

// 	     //验证性别是否为空   不要了默认选男
// 	     function fxingbie(){
// 		 let xb=document.getElementById("xingbie").value;
// 		 if (xb==="") {
// 		 	document.getElementById("axingbie").innerHTML="请选择性别"
// 		 	return false;
// 		 }
// 		 else{

// 		 		document.getElementById("axingbie").innerHTML="√";
// 		 		return true;
// }
// }
         //验证手机号
         function fshouji(){
         	let reg=/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
         	let sj=document.getElementById("shouji").value;
         	if (!reg.test(sj)) {
         		document.getElementById("ashouji").innerHTML="请输入正确的11位大陆手机号";
         		return false;
         	}
         	else
         	{

		 		document.getElementById("ashouji").innerHTML="√";
		 		return true;
         	}

         }

         //验证邮箱
         function femail(){
         	let reg=/((^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$))/;
         	let em=document.getElementById("email").value;
         	if (!reg.test(em)&&em!="") //邮箱可以为空 ,在这卡了好久  哭了
         	{
         		document.getElementById("aemail").innerHTML="请输入正确的邮箱地址";
         		return false;
         	}
         	else
         	{

		 		document.getElementById("aemail").innerHTML="√";
		 		return true;
         	}

         }
         
	</script>
</head>
<body>

 <div id="bg">
 <img src="yz.png" width="100px" height="100px" id="logo">
 <div id="jieguo"></div>
 <div id="biaodan">

<form id="baoming" method="get">	
		<br>
		<br>
		<p align="center" style="font-size: 30px;">河南中医药大学仪仗队招新表单</p>
		<br>
		<br>
		<label for="xuehao">学号		<!-- 标注 for=id -->
			<span style="color:red">*</span>		<!-- 小红星 -->
		</label>
		&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
		<img src="xuehao.png" id="pxuehao" height="15" width="15">
		<input type="text" onblur="fxuehao()" size="30%" id="xuehao" name="xuehao" placeholder="请输入10位学生号" required="required">
		<span id="axuehao"></span>
		<br>
		<br>
		<label for="xingming">姓名		<!-- 标注 for=id -->
			<span style="color:red">*</span>		<!-- 小红星 -->
		</label>
		&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
		<img src="xingming.png" id="pxingming" height="15" width="15">
		<input type="text" onblur="fmingzi()" size="30%" id="xingming" name="xingming" placeholder="报名的重要依据，请认真填写" required="required">
		<span id="axingming"></span>
		<br>
		<br>
		<label for="yvanxi">院系		<!-- 标注 for=id -->
			<span style="color:red">*</span>		<!-- 小红星 -->
		</label>
		&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
		<img src="yvanxi.png" id="pyvanxi" height="15" width="15">
		<!-- 中文网扒下来的,班级有js没找到 -->
		<select style="width:232px;" onblur="fyvanxi()" id="yvanxi" name="yvanxi" required="required">
			<option value=""></option>undefined
			<option value="中医学院（仲景学院）">[035000]中医学院（仲景学院）</option>
			<option value="药学院">[036000]药学院</option>
			<option value="管理学院">[037000]管理学院</option>
			<option value="外语学院">[038000]外语学院</option>
			<option value="信息技术学院">[039000]信息技术学院</option>
			<option value="护理学院">[040000]护理学院</option>
			<option value="康复医学院">[041000]康复医学院</option>
			<option value="继续教育学院">[042000]继续教育学院</option>
			<option value="国际教育学院">[043000]国际教育学院</option>
			<option value="马克思主义学院">[044000]马克思主义学院</option>
			<option value="体育学院">[045000]体育学院</option>
			<option value="第一临床医学院（中西医结合学院）">[046000]第一临床医学院（中西医结合学院）</option>
			<option value="第二临床医学院">[047000]第二临床医学院</option>
			<option value="第三临床医学院">[048000]第三临床医学院</option>
			<option value="第五临床医学院">[050000]第五临床医学院</option>
			<option value="洛阳平乐正骨学院">[051000]洛阳平乐正骨学院</option>
			<option value="医学院">[052000]医学院</option>
			<option value="儿科医学院">[053000]儿科医学院</option>
			<option value="骨伤学院">[054000]骨伤学院</option>
			<option value="本草书院">[055000]本草书院</option>
			<option value="尚真书院">[056000]尚真书院</option>
			<option value="软件职业技术学院">[43]软件职业技术学院</option>
			<option value="洛阳针灸推拿职业学院">[80]洛阳针灸推拿职业学院</option>
			<option value="河南省医药学校">[81]河南省医药学校</option>
			<option value="洛阳平乐正骨医院">[82]洛阳平乐正骨医院</option>
			<option value="嵩山少林武术职业学院">[83]嵩山少林武术职业学院</option>
			<option value="濮阳市中医院">[85]濮阳市中医院</option></select>
		<span id="ayvanxi"></span>
		<br>
		<br>
		<label for="xingbie">性别</label>
		<span style="color:red">*</span>		<!-- 小红星 -->
		&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
		<input type="radio" class="xingbie" name="xingbie" id="man" value="男" checked="checked">
		<!-- 默认男,就不用判断是否为空了 -->
		<label for="man">男</label>
		<input type="radio" class="xingbie" name="xingbie" id="women" value="女" >
		<label for="women">女</label>
		<span id="axingbie"></span>
		<br> 
		<br>
		<label for="shouji">手机		<!-- 标注 for=id -->
		<span style="color:red">*</span>		<!-- 小红星 -->
		</label>
		&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
		<img src="dianhua.png" height="15" width="15">
		<input type="text" size="30%" onblur="fshouji()" id="shouji" name="shouji" placeholder="请输入11位大陆手机号" required="required">
		<span id="ashouji"></span>
		<br>
		<br>
		<label for="email">邮箱</label>
		<!-- <span style="color:red">*</span>	 -->	<!-- 小红星 -->
		&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
		<img src="youxiang.png" height="15" width="15">
		<input type="text" onblur="femail()" name="email" id="email" size="30%" placeholder="请选填邮箱">
		<span id="aemail"></span>
		<br>
		<br>
		<label for="techang">特长爱好</label>
		&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
		<textarea cols="30" rows="3" name="techang" id="techang" placeholder="请简述你的特长爱好"></textarea>
		<span id="atechang"></span>
		<br>
		<br>
		<label for="yixiang">报名意向</label>
		&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
		<input type="checkbox" name="yixiang" id="1" class="yixiang" value="旗手组">
		<label for="1">旗手组</label>
		<input type="checkbox" name="yixiang" id="2" class="yixiang" value="特训组">
		<label for="2">特训组</label>
		<input type="checkbox" name="yixiang" id="3" class="yixiang" value="组织部">
		<label for="3">组织部</label>	
		<input type="checkbox" name="yixiang" id="4" class="yixiang" value="宣传部">
		<label for="4">宣传部</label>
		<input type="checkbox" name="yixiang" id="5" class="yixiang" value="办公室">
		<label for="5">办公室</label>
		<span id="atechang"></span>
		<br>
		<br>
		&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
		<!-- <input type="image" onblur="sub()" src="tijiao.png" alt="tijiao" width="90"> -->
		<div id="tijiao" onclick="sub()"><input type="image" src="tijiao.png" alt="tijiao" style="height: 30px;width: 90px;">
		</div>
		<br>
		<br>
		<br>
	</form>
 </div>
</div>
</body>
</html>

素材及源码整合包下载:网页设计与网站规划结课作业.zip-网页制作文档类资源-CSDN下载网页设计与网站规划结课作业素材及源码更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/qq_54499870/64772879

Rhyme_7
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js课后作业
weixin_70649267的博客
09-19 134
js课后作业
web网页设计课程结课作业
07-19
在本“Web网页设计课程结课作业”中，学生展示了他们在网页设计领域的综合技能和学习成果。这份作业不仅是对课程理论知识的实践应用，也是对技术能力的检验，包括前端开发、用户界面设计、响应式布局等多个方面。...
JS结课作业,html结课作业,JavaScript源码.zip.zip
10-14
JS结课作业,html结课作业,JavaScript源码.zip.zip
web前端期末大作业：JavaScript大作业——福五鼠动漫网页制作(6页)带轮播图效果 学生个人单页面网页作业 学生网页设计成品 静态HTML网页单页制作 (1)
最新发布
有问必答，欢迎打扰，项目开发，网页设计
06-18 301
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】 文章目录🌰一、网页介绍📖一、网页效果🌌二、代码展示😈1.HTML代码结构 🧱2.CSS样式代码 🏠三、个人总结😊四、更多干货🚀
JavaScript结课大作业.zip
12-25
JavaScript结课大作业
JS鼠标事件
weixin_67358175的博客
09-28 249
作业
HTML网页设计制作大作业 html+css+js 宠物之家 网页设计与实现
12-20
宠物之家的网页设计与实现是一项综合性的HTML网页设计制作大作业，它涵盖了HTML、CSS和JavaScript这三种核心技术，旨在帮助同学们提升网页制作能力并实践实际项目。在这个项目中，学生可以学习到如何创建一个功能...
学生dreamweaver网页设计作业成品-简单动漫网页设计
07-26
学生dreamweaver网页设计作业成品,采用html+css布局,是学习网页设计不错的案例和源代码,希望对大家有所帮助 ... 首页制作了留言表单，同时简单使用JavaScript制作了表单判断（提交时表单不能为空） 空）
大一选修课《网页设计与网站开发》平时作业实验题答案及题目所需材料
07-22
在大一选修课程《网页设计与网站开发》中，学生会接触到一系列关于网页制作的基础知识，这门课程旨在帮助初学者理解并掌握构建网页的基本技能。提供的压缩包文件包含了不同周次的作业实验题答案及相关的学习资料，...
html+css+js结课作业.rar
06-06
html+css+js结课作业，大二写的网页设计结课作业，内容是关于西藏热门景点的介绍，欢迎大家下载使用。
html+css+js实现的拼图游戏结课作业.rar
06-11
html+css+js实现的拼图游戏结课作业，大二写的网页设计结课作业，内容是一个拼图小游戏，欢迎大家下载使用。
JavaScript课程设计
02-17
JavaScript课程设计，实现了学生相册功能，页面风格切换功能等
大学软件工程结课作业4份
05-19
大学大三结课时所需的静态页面，做法比较简单，4份均无雷同，符合大学生手打的格式，符合一般大学所要求的的条例，每一份都带有多媒体页面（or图片轮播页面），控制DOM对象 ，使用js正则表达式对表单约束等。
JS课下作业
欣儿砸的博客
04-08 239
HTML+CSS+JS网页设计期末课程大作业(家居网)
qq_365392777
10-16 6082
????文章目录​​二、????网站介绍​​​​三、????网站效果​​​​▶️1.视频演示​​​​???? 2.图片演示​​​​四、???? 网站代码​​​​????HTML结构代码​​​​????CSS样式代码​​​​五、????更多源码​​二、????网站介绍????网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。????网站程序方面：计划采...
js课堂作业
Pupilla的博客
09-18 309
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload=function () { var b...
HTML+CSS+JS网页设计期末课程大作业 web课程设计 web前端开发 网页规划与设计
...
01-08 5076
HTML+CSS+JS网页设计期末课程大作业 web课程设计 web前端开发 网页规划与设计
JavaScript课后作业1-6
chen20051124的博客
09-05 402
JavaScript基础题目详解，30年工作经验
大学计算机基础：FrontPage2003制作网页与网站规划
"该资源是关于大学计算机基础的网页设计与制作教程，主要涵盖网站的建设与规划，使用FrontPage2003制作网站，以及网站的发布和管理。重点内容包括网页基础知识，如WWW、HTML语言、常用的网页制作工具，特别是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Rhyme_7

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

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

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

打赏作者

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

抵扣说明：

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

余额充值