仿百度注册页面

最新推荐文章于 2024-07-17 17:08:15 发布

胖头鱼啊

最新推荐文章于 2024-07-17 17:08:15 发布

阅读量2.3k

点赞数 2

本文链接：https://blog.csdn.net/m0_37620053/article/details/65443474

版权

该博客介绍了一个仿百度注册页面的实现过程，主要利用HTML构建页面结构，CSS设置样式，以及jQuery实现交互效果。内容包括文本框的焦点与失焦样式变换，信息提示的动态显示与隐藏，正则表达式验证输入内容，以及注册按钮的错误与成功提示功能。

摘要由CSDN通过智能技术生成

这是一个仿百度注册的页面，通过HTML和CSS来实现网站架构和样式，通过jQuery来实现页面互动效果。

文本框聚焦和失去聚焦时文本框样式的变化以及信息提示的显示和隐藏；文本框内容的清除和样式回复；当输入内容后失去聚焦时，通过正则表达式函数来判断输入内容是否符合要求，如果不符合要求则返回false并且显示错误提示信息，符合要求则返回true并且提示正确信息；当点击注册时，如果文本框没有输入内容及内容错误时，提示错误信息，所有内容输入正确提示注册成功。

HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册帐号</title>
		<link rel="stylesheet" type="text/css" href="css/reg.css"/>
		<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/reg.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	<!--header开始-->
	<div class="header">
		<div>
			<a href="#" class="baidu"></a>
		</div>
		<div>
			<a href="#" class="logo"></a>
		</div>
		<div class="login">
			<span>我已注册，现在就</span>
			<a href="#" class="login_icon">登录</a>
		</div>
		<div class="hr"></div>
	</div>
	<!--header结束-->
	
	<!--content开始-->
	<div class="content">
		<div class="reg">
		<form action="http://www.baidu.com" method="post">
			<dl>
				<dt>用户名</dt>
				<dd class="ipt_box">
					<input id="usr" name="usr" type="text" placeholder="请设置用户名" />
					<span class="clear"></span>
				</dd>
				<dd class="mes">
					<div class="tip">设置后不可更改<br>中英文均可，最长14个英文或7个汉字</div>
					<div class="error">
						<span class="error_icon"></span>
						<span></span>
					</div>
				</dd>
			</dl>

			<dl>
				<dt>手机号</dt>
				<dd class="ipt_box">
					<input id="tel" name="tel" type="text" placeholder="可用于登录和找回密码" />
					<span class="clear"></span>
				</dd>
				<dd class="mes">
					<div class="tip">请输入中国大陆手机号,其他用户不可见</div>
					<div class="error">
						<span class="error_icon"></span>
						<span></span>
					</div>
				</dd>
			</dl>

			<dl>
				<dt>验证码</dt>
				<dd class="ipt_box">
					<input id="yzm" name="yzm" type="text" placeholder="请输入验证码" />
					<span class="clear"></span>
				</dd>
				<dd class="mes">
					<div class="error">
						<span class="error_icon"></span>
						<span></span>
					</div>
				</dd>
			</dl>

			<dl>
				<dt>密码</dt>
				<dd class="ipt_box">
					<input id="pwd" name="pwd" type="password" placeholder="请设置登录密码" />
					<span class="clear"></span>
				</dd>
				<dd cla