程序创新大会报名表4.0（html+css+javaScript+jQuery）

最新推荐文章于 2022-11-14 18:00:02 发布

王宇辉

最新推荐文章于 2022-11-14 18:00:02 发布

阅读量228

点赞数

文章标签： javascript jquery html

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

版权

这篇博客是Java学习五部分的第二阶段前端练习回顾，主要内容是创建程序创新大会报名表，实现了HTML、CSS、JavaScript和jQuery的结合应用。作者分享了项目的成功截图，并提供了思路分析，但详细代码和相关资料已存储在百度网盘，附带链接供读者查阅。

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

写再前面的话

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

需求介绍：

在这里插入图片描述

代码运行成功截图：

在这里插入图片描述

思路分析：

整个前端系列都没有让我写这里的想法，而且我以后应该也不会写前端。那些图片资料，js,css什么的再百度网盘的链接里

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大会报名表</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<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 isUserName(){
     
				var val=$("input[name='userName']").val();
					if(val==""){
     
						$("span[id='userNameMsg']").html("用户名不能为空！").css("color","red");
						return false;
					}else if(/^[a-zA-z]\w{5,}/.test(val)==false){
     
						$("span[id='userNameMsg']").html("用户名不合法！").css("color","red");
						return false;
					}
					$("span[id='userNameMsg']").html("用户名可用！").css("color","green");
					return true;
			}
			/*校验电话码格式-座机或者手机 */
			function isTelCode(str) {
         
				var reg = /^((0\d{2,3}-\d{7,8})|(1[345789]\d{9}))$/;
				if(reg.test(str)){
     
					$("span[id='phoneMsg']").html("OK！").css("color","green");
					return true; 
				}
				$("span[id='phoneMsg']").html("电话格式不合法！").css("color","red");
				return false; 
			}
			/*校验邮件地址是否合法 */
			function IsEmail(str) {
         
				var reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
				if(reg.test(str)){
     
					$("span[id='emailMsg']").html("OK！").css("color","green");
					return true; 
				}
				$("span[id='emailMsg']").html("邮箱地址不合法！").css("color","red");
				return false;

最低0.47元/天解锁文章