开发项目初探 —— jQuery 的使用，制作提交表单，模仿百度注册表单，设置事件

最新推荐文章于 2021-07-31 15:12:05 发布

wx-zhou

最新推荐文章于 2021-07-31 15:12:05 发布

阅读量477

点赞数 8

分类专栏： html 项目学习文章标签： js html css 百度网页设计

本文链接：https://blog.csdn.net/CNdota_never_die/article/details/116082566

版权

项目学习同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

任务目标

在这里插入图片描述
模拟制作一个百度的注册表单，并达到提交成功的目的。
制作要求：

鼠标移入用户名 =》提示设置后不可更改；
鼠标移出用户名 =》未输入内容 =》无提醒；
鼠标移出用户名 =》已输入内容 =》提醒一个绿色的 OK；
鼠标移入手机号 =》未输入内容 =》无提醒；
鼠标移出手机号 =》已输入内容 =》电话字符长度 11 =》提醒一个绿色的 OK；
鼠标移出手机号 =》已输入内容 =》电话字符长度大于或小于 11 =》提醒一个红色的 error ；

(其他的比如对密码的格式要求，可以使用正则表达式对内容进行限制就可以了，这后面就没有进行展示了)

代码内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./css/表单提交.css" />
	</head>
	<body>
		<form action="#" method="get">
			<!-- 如果是get方式提交
			 提交的数据会显示在浏览器的地址栏上
			 哪些数据会被提交？
			 一定要给对象设置一个name属性-->
			<div id="register">
				<span id="hello">欢迎注册 </span><br />
				<span id="tips1">已有账号？</span><a href="xxxx" style="color: royalblue;text-decoration: none;">登陆</a>
				<!-- a标签设置：decoration none 取消下划线 -->
			</div>
			<div id="div_list">
				<span id="tips2">用户名</span>
				<input type="text" name="username" id="input_username" placeholder=" 请设置用户名" /><br />
				<span id="check_info"> </span>
			</div>

			<div id="div_list">
				<span id="tips2">手机号</span>
				<input type="text" name="userphone" id="input_userphone" placeholder=" 可用于登陆和找回密码" /><br />
				<span id="check_info"> </span>
			</div>

			<div id="div_list">
				<span id="tips2">密&nbsp;&nbsp;&nbsp;&nbsp;码</span>
				<input type="text" name="userpaswd" id="input_userpaswd" placeholder=" 请设置登陆密码" /><br />
				<span id="check_info"> </span>
			</div>

			<div id="div_list">
				<span id="tips2">验证码</span>
				<input type="text" name="验证码" id="input_yz" placeholder=" 请输入验证码" />
				<button type="button" id="get_yz">获取验证码</button>
			</div>

			<div id="div_list">
				<button type="submit" id="button_zhuce" value="注册-submit">注册</button><br />
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="checkbox" name="hobby" value="h1" /> <span id="check_xx">阅读并接收</span><a href=""
					id="a_xx">《百度用户协议》</a><span id="check_xx">及</span><a href="" id="a_xx">《百度隐私权保护协议》</a>
			</div>
		</form>

		<script src="./js/jquery-3.5.1.min.js"></script>
		<script type="text/javascript">
			// 这里对事件进行设置
			// 用户名设置
			// 鼠标移入提示：用户名设置不可更改
			// 光标以出框中：没有内容 =》 无提醒
			// 符合要求 =》 绿色的 ok 
			// 不符合要求 =》 红色框红色error
			username_obj = $("#input_username")
			username_obj.focus(function() {
				username_obj.siblings("span#check_info").text("设置后不可更改")
			})
			// 光标移出，效果消除
			username_obj.blur(check_username)

			function check_username() {

				if (this.value.length == 0) {
					username_obj.siblings("span#check_info").text("")
					username_obj.siblings("span#check_info").css({
						"color": "dimgray"
					})
				} else {
					username_obj.siblings("span#check_info").text("OK")
					username_obj.siblings("span#check_info").css({
						"color": "green"
					})
				}

			}
			// jquery 对象可以使用 =》 obj.val()获取值
			//  原生 this =》 this.value 获取值
			userphone_obj = $("#input_userphone")
			// console.log(userphone_obj.siblings("span"))
			// console.log(userphone_obj)
			userphone_obj.blur(check_userphone)

			function check_userphone() {
				if (this.value.length == 0) {
					userphone_obj.siblings("span#check_info").text("")
					userphone_obj.siblings("span#check_info").css({
							"color": "dimgray"
					
					})
				}else if (this.value.length == 11) {
					userphone_obj.siblings("span#check_info").text("ok")
					userphone_obj.siblings("span#check_info").css({
							"color": "green"
					})
				}else {
					userphone_obj.siblings("span#check_info").text("error")
					userphone_obj.siblings("span#check_info").css({
							"color": "red"
					})
				}
			}
		</script>
	</body>
</html>

CSS 代码：

form {
	width: 500px;
	height: 600px;
	border: #000000 1px solid;
	border-radius: 15px;
	background-color: snow;
}

#input_username {
	height: 65%;
	width: 83%;
	float: left;
	margin-top: 2px;
	border: 1px solid #cecece;
	border-radius: 5px;
}

#input_userpaswd {
	height: 65%;
	width: 83%;
	float: left;
	margin-top: 2px;
	border: 1px solid #cecece;
	border-radius: 5px;
}

#input_userphone {
	height: 65%;
	width: 83%;
	float: left;
	margin-top: 2px;
	border: 1px solid #cecece;
	border-radius: 5px;
}

#input_yz {
	height: 65%;
	width: 52%;
	float: left;
	margin-top: 2px;
	border: 1px solid #cecece;
	border-radius: 5px;
}

#get_yz {
	background-color: whitesmoke;
	height: 65%;
	width: 28%;
	float: right;
	margin-top: 2px;
	border: 0px;
	border-radius: 5px;
}

#button_zhuce {
	height: 80%;
	width: 100%;
	background-color: powderblue;
	color: whitesmoke;
	border: 0px;
	border-radius: 30px;
}

#div_list {
	height: 65px;
	width: 80%;
	margin-left: 50px;
	align-items: center;
	margin-top: 10px;
	/* background-color: #00FFFF; */
}

#register {
	margin-top: 40px;
	height: 120px;
	margin-left: 50px;
	width: 80%;
	/* border: #808080 1px solid; */
	/* background-color: #0000FF; */
}

#hello {
	font-size: 40px;
	font-family: "黑体";
	font-weight: 700;
}

#tips1 {
	color: #778899;
}

#tips2 {
	height: 90%;
	width: 15%;
	float: left;
	margin-top: 15px;
	/*border: #000000 1px solid; */
	color: dimgray;
}

/* 设置input里面placeholder元素状态 */
input::-webkit-input-placeholder {
	color: lightgray;
}

#check_xx {
	font-size: 3px;
}

#check_info {
	font-size: 3px;
}

#a_xx {
	font-size: 3px;
	text-decoration: none;
}

最后展示效果图：
在这里插入图片描述

模仿的还是比较成功的 dog

wx-zhou

关注

8
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
4
评论
开发项目初探 —— jQuery 的使用，制作提交表单，模仿百度注册表单，设置事件

任务目标模拟制作一个百度的注册表单，并达到提交成功的目的。制作要求：鼠标移入用户名 =》提示设置后不可更改；鼠标移出用户名 =》未输入内容 =》无提醒；鼠标移出用户名 =》已输入内容 =》提醒一个绿色的 OK；鼠标移入手机号 =》未输入内容 =》无提醒；鼠标移出手机号 =》已输入内容 =》电话字符长度 11 =》提醒一个绿色的 OK；鼠标移出手机号 =》已输入内容 =》电话字符长度大于或小于 11 =》提醒一个红色的 error ；(其他的比如对密码的格式要求，
复制链接

扫一扫