使用JS、Html、Css实现一个注册页面

最新推荐文章于 2022-09-16 16:08:15 发布

可以吃的电脑配件

最新推荐文章于 2022-09-16 16:08:15 发布

阅读量658

点赞数

分类专栏： web前端文章标签： javascript css html html5

本文链接：https://blog.csdn.net/No_errorsNo_wars/article/details/107243720

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

实现以下功能

鼠标焦点不在输入框上的时候，检核之前的输入框内容是否合格，不合格，在下方输出警告语句

点击注册按钮时，检核所有数据是否合格，合格则打包发送给服务器（未完成的功能），不合格则输出警告语句

代码部分如下

Html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>易买网注册页面</title>
		<link rel="stylesheet" type="text/css" href="css/work.css"/>
	</head>
	<body class="container">
		<!-- 这是一个表格 -->
		<table class="table_list">
			<!-- 表格第一行 -->
			<tr >
				<td></td>
				<td class="table_title">
					<span>注册</span>
					<span>已有账号，<a href=""> 我要登录</a></span>
				</td>
			</tr>
			
			
			
			<!-- 表格第二行 -->
			<tr>
				<td>
					<span>
						登录用户名
					</span>
				</td>
				<td>
					<span>
						<input type="text" id="username" class="i_username" onfocus="focusUsername()" onblur="blurUsername()" />
					</span>
				</td>
				
			</tr>
			<tr>
				<td></td>
				<td class="check_result" id="checkUsername" ></td>
			</tr>
			
			
			
			<!-- 表格第二行 -->
			<tr>
				<td>
					<span>
						输入密码
					</span>
				</td>
				<td>
					<span>
						<input type="password" id="password" class="i_password" onfocus="focusPassword()" onblur="blurPassword()"/>
					</span>
				</td>
			</tr>
			
			<tr>
				<td></td>
				<td id="checkPassword" class="check_result"></td>
			</tr>
			
			
			
			<!-- 表格第三行 -->
			<tr>
				<td>
					<span>
						确认密码
					</span>
				</td>
				<td>
					<span>
						<input type="password" id="rePassword" class="i_rePassword" onfocus="focusRePassword()" onblur="blurRePassword()"/>
					</span>
				</td>
				
			</tr>
			
			<tr>
				<td></td>
				<td id="checkRePassword" class="check_result"></td>
			</tr>
			
			
			
			<!-- 表格第四行 -->
			<tr>
				<td>
					<span>
						真实姓名
					</span>
				</td>
				<td>
					<span>
						<input type="text" id="realName" class="i_realName" onfocus="focusRealName()" onblur="blurRealName()"/>
					</span>
				</td>
			</tr>
			
			<tr>
				<td></td>
				<td id="checkRealName" class="check_result"></td>
			</tr>
			
			
			
			<!-- 表格第五行 -->
			<tr>
				<td>
					<span>性别</span>
				</td>
				<td>
						<label for="male">男</label>
						<input type="radio" name="sex" id="male" />
						<label for="female">女</label>
						<input type="radio" name="sex" id="female" />
				</td>
			</tr>
			
			<tr>
				<td></td>
				<td id=""></td>
			</tr>
			
			
			
			
			<!-- 表格第六行 -->
			<tr>
				<td>
					<span>
						身份证号码
					</span>
				</td>
				<td>
					<span>
						<input type="text" id="idCode" class="i_idCode" onfocus="focusIdCode()" onblur="blurIdCode()"/>
					</span>
				</td>
				
			</tr>
			
			<tr>
				<td></td>
				<td id="checkIdCode" class="check_result"></td>
			</tr>
			
			
			
			<!-- 表格第七行 -->
			<tr>
				<td>
					<span>邮箱</span>
				</td>
				<td>
					<span>
						<input type="text" id="email" class="i_email" onfocus="focusEmail()" onblur="blurEmail()"/>
					</span>
				</td>
				
			</tr>
			
			<tr>
				<td></td>
				<td id="checkEmail" class="check_result"></td>
			</tr>
			
			
			
			<!-- 表格第八行 -->
			<tr>
				<td>
					<span>手机号码</span>
				</td>
				<td>
					<span>
						<input type="text" id="mobile" class="i_mobile" onfocus="focusMobile()" onblur="blurMobile()"/>
					</span>
				</td>
			</tr>
			
			<tr>
				<td></td>
				<td id="checkMobile" class="check_result"></td>
			</tr>
			
			
			
			<!-- 表格第九行注册 -->
			<tr>
				<td></td>
				<td>
					<input type="button" class="buton" id="" value="立即注册" onclick="regist()"/>
				</td>
			</tr>
			
			<tr>
				<td></td>
				<td id="regist" class="check_result" ></td>
			</tr>
			
		</table>
	</body>
</html>
<script src="js/work.js" type="text/javascript" charset="utf-8"></script>

Css

/* 容器的类选择器 */
.container{
	background-color: #eaeaea;
	
}
/* 表标题的类选择器 */
.table_title{
	display: flex;
	justify-content: space-around;
}
/* 选中表标题的span子元素 */
.table_title span{
	/* 左对齐 */
	text-align: left;
}
/* 选中表标题的超链接子元素 */
.table_title a{
	color: #FF0064;
	text-decoration: none;
	margin-left: 5px;
}
/* 选中表身体 */
.table_list{
	margin: 100px auto;
	
}
/* 按钮 */
.buton{
	width: 300px;
	height: 30px;
	background-color: #ff0064;
	color: white;
	font-size: 18px;
	font-weight: bold;
	
}

.buton:hover{
	background-color: purple;
	color: red;
}
/* 表list 的子元素 span */
.table_list span{
	display: inline-block;
	font-size: 18px;
	width: 100%;
	text-align: right;
	font-size: 14px;
	color:#8B8989 ;
	
}
.table_list td{
	padding: 5px;
}

.i_username,.i_password,.i_rePassword,.i_realName,.i_idCode,.i_email,.i_mobile{
	
	width: 300px;
	height: 35px;
	border: 1px solid #EAEAEA;
	padding-left: 15px;
	/* 不重复 */
	background-repeat: no-repeat;
	background-color: white;
	background-position: 270px center;
}
/* 设置背景图片*/

.i_username{
	background-image: url(../img/用户名.png);
}

.i_password{
	background-image: url(../img/密码.png);
}

.i_rePassword{
	background-image: url(../img/确认密码.png);
}

.i_realName{
	background-image: url(../img/真实姓名.png);
}

.i_idCode{
	background-image: url(../img/身份证.png);
}

.i_email{
	
	background-image: url(../img/邮箱.png);
}

.i_mobile{
	background-image: url(../img/手机号码.png);
	
}
.check_result{
	color: red;
	text-align: left;
}

// 当用户名得到焦点的时候，将checkUsername置空
function focusUsername(){
	document.getElementById("checkUsername").innerText = "";
}
//当用户名失去焦点的时候，输出
function blurUsername(){
	//判断用户名是否为空
	if(document.getElementById("username").value == ""){
		// 若为空，在下方的td中输出
		document.getElementById("checkUsername").innerText = "用户名不能为空！";
		return false;
	}
	return true;
}
// 当密码得到焦点的时候，将checkPassword置空
function focusPassword(){
	
	document.getElementById("checkPassword").innerText = "";
}
// 当密码框失去焦点的时候，进行判断，若不合格，输出语句
function blurPassword(){
	//对密码的长度金进行判断
	if(document.getElementById("password").value.length<6){
		//通过checkPassword的innerText属性输出值
		document.getElementById("checkPassword").innerText = "密码长度不能小于六位";
		return false;
	}
	return true;
}
// 当确认密码得到焦点的时候，将checkRePassword置空
function focusRePassword(){
	document.getElementById("checkRePassword").innerText = "";
}
// 当确认密码框失去焦点的时候，进行判断，若不合格，输出语句
function blurRePassword(){
	// 判断rePassword和password的值是否相等
	if(document.getElementById("rePassword").value!=document.getElementById("password").value){
		//通过checkRePassword的innerText属性输出值
		document.getElementById("checkRePassword").innerText = "两次密码不一致";
		return false;
	}
	return true;
}
// 当真实姓名得到焦点的时候，将checkRealName置空
function focusRealName(){
	document.getElementById("checkRealName").innerText = "";
}
// 当确认密码框失去焦点的时候，进行判断，若不合格，输出语句
function blurRealName(){
	// 定义一个正则表达式
	var reg =/^[\u4e00-\u9fa5]{2,4}$/;
	// 用正则表达式的test方法判断是否realName是否合格
	if(!reg.test(document.getElementById("realName").value)){
		document.getElementById("checkRealName").innerText = "姓名不符合规范！";
		return false;
	}
	return true;
}
// 当身份证得到焦点的时候，将checkIdCode置空
function focusIdCode(){
	document.getElementById("checkIdCode").innerText = "";
}
// 当身份证输入框失去焦点的时候，进行判断，若不合格，输出语句
function blurIdCode(){
	//定义正则表达式
	var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
	//用正则表达式的test方法判断是否idcode是否合格
	if(!reg.test(document.getElementById("idCode").value)){
		//不合格输出语句
		document.getElementById("checkIdCode").innerText = "身份证格式不符合规范";
		return false;
	}
	return true;
}
// 当邮箱得到焦点的时候，将checkEmail置空
function focusEmail(){
	document.getElementById("checkEmail").innerText = "";
}
// 当邮箱输入框失去焦点的时候，进行判断，若不合格，输出语句
function blurEmail(){
	//定义正则表达式
	var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
	// 用正则表达式的test方法判断是否email是否合格
	if(!reg.test(document.getElementById("email").value)){
		// 不合格输出语句
		document.getElementById("checkEmail").innerText = "邮箱格式不符合规范";
		return false;
	}
	return true;
}
// 当手机得到焦点的时候，将checkMobile置空
function focusMobile(){
	document.getElementById("checkMobile").innerText = "";
}
// 当手机输入框失去焦点的时候，进行判断，若不合格，输出语句
function blurMobile(){
	//定义正则表达式
	var reg = /^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,7,8]|8[0-9]|9[1,8,9])\d{8}$/;
	//用正则表达式的test方法判断是否mobile是否合格
	if(!reg.test(document.getElementById("mobile").value)){
		// 不通过 输出语句
		document.getElementById("checkMobile").innerText = "手机号码格式不符合规范";
		return false;
	}
	return true;
}


function regist(){
	if(blurUsername() & blurPassword() & blurRePassword() 
	& blurRealName() & blurIdCode() & blurEmail() & blurMobile()){
		console.log("所有数据成功通过验证");
	}else{
		document.getElementById("regist").innerText = "有数据未成功通过验证";
	}
}

可以吃的电脑配件

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
使用JS、Html、Css实现一个注册页面

实现以下功能鼠标焦点不在输入框上的时候，检核之前的输入框内容是否合格，不合格，在下方输出警告语句点击注册按钮时，检核所有数据是否合格，合格则打包发送给服务器（未完成的功能），不合格则输出警告语句代码部分如下Html<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>易买网注册页面</title> &...
复制链接

扫一扫