程序创新大会报名表3.0（html+css+javaScript）_html+css+js可以申报大创么-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42688085/article/details/123134608

本文回顾了Java学习中的前端项目，特别是HTML+CSS+JavaScript实现的报名表3.0。博主分享了项目的整体思路，虽然不打算深入前端，但提供了代码运行成功的截图和百度网盘资料链接，包含笔记、代码和其他资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写再前面的话

1，本文为Java学习五部分第二部分所有项目回顾（前端练习系列-对应Java体系第二部分第二阶段内容）这些再前面的博客里有，再写会重复的。但是一想到我设计的第五部分第一阶段本来就要把那些值得记录的项目练习单独整理一遍。所以，理应如此，我会写的更好的。
2，整体项目系列博客（包括整体快递e站系列，数据库练习系列，前端练习系列，Javaweb系列，SSM系列，微服务系列，实战系列，等）
3，完整的Java体系链接（比你想的更多的Java内容），感谢一下开课吧。

需求介绍：

在这里插入图片描述

代码运行成功截图：

思路分析：

整个前端系列都没有让我写这里的想法，而且我以后应该也不会写前端。

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大会报名表</title>
		<style>
		/*去除浏览器的默认样式*/
			*{
     
				margin: 0;
				padding: 0;
				color: #333;
			}
			a{
     
				text-decoration: none;
				color: #333;
			}
			body {
     
            text-align: center;
            background-image: url("./img/3.png");
            background-size: 100% 100%;
            font-family: LiSu;
            background-attachment: fixed"
        	}
			.titleColor{
     
				color:#ffa133;
			}
			.w1200{
     
				background-color: lavenderblush;
				margin: 0 auto;
			}
			
			.head-nav{
     
				background-color: khaki;
				height: 60px;
			}
			.logo{
     
				background-color: lightcyan;
				margin: 0 auto;
			}
			.chanal-nav{
     
				background-color: lightgreen;
				height: 45px;
				margin: 0 auto;
			}
			.type{
     
				background-color: #ffa133;
				font-size: 24px;
				font-weight: bold;
				width: 190px;
				margin: auto;
				padding-left: 18px;
				box-sizing: border-box;
				float: left;
			}
			.nav{
     
				list-style: none;
				float: left;
			}
			.nav a{
     
				font-size: 4px;
			}
			.nav li{
     
				float: left;
				padding: 0 15px;
			}
			.split{
     
				color: #aaa;
				height:45px;
			}
			
			.bg-lightgray{
     
				background-color: #f6f6f6;
				height: 1000px;
			}
			.clear{
     
				clear: both;
			}	
		</style>
		<script>
			/*校验是否中文名称组成 */
			function ischina(str) {
         
				var reg =/^[\u0391-\uFFE5]+$/; /*定义验证表达式*/
				return reg.test(str); /*进行验证*/
			}
			/*校验手机号*/
			function isPhoneNum(str) {
      
				//如果你要精确验证手机号码，那个你可以使用第一个正则。这是根据电信，移动，联通目前发行的号码来的。验证比较精确。 
				var reg = /^1[3|4|5|7|8][0-9]{9}$/;
				// 如果因为现有的号码不能满足市场需求，电信服务商会增大号码范围。所以一般情况下我们只要验证手机号码为11位，且以1开头。 
				var reg = /^^1[0-9]{10}$$/;
				return reg.test(str);
			}
			/*校验邮件地址是否合法 */
			function IsEmail(str) {
         
				var reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
				return reg.test(str);
			}
			function validateName(){
     
				var str=document.getElementById("name1").value;
				var msg=document.getElementById("nameMsg");
				if(ischina(str)==false){
     
					msg.innerHTML="请输入中文名";
					msg.style.color="red";
					return false;
				}
				msg.innerHTML="名字合法！";
				msg.style.color="green";
				return true;
			}
			function validateEmail(){
     
				var str=document.getElementById("email").value;
				var msg=document.getElementById("emailMsg"