注册登陆页面

最新推荐文章于 2022-11-30 15:52:08 发布

平安喜乐Alice

最新推荐文章于 2022-11-30 15:52:08 发布

阅读量632

点赞数 1

分类专栏：前端项目文章标签： html css js

本文链接：https://blog.csdn.net/qq_44095347/article/details/108724080

版权

前端项目专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果图

1、 HTML搭建框架，前端页面显示

2、 css设置样式，鼠标获得焦点文本框显示阴影

3、 js，使用正则表达式验证

用户名 /^[0-9a-zA-Z_]{6,18}$/

密码 /^\S{6,20}$/

姓名 /^[\u4e00-\u9fa5]{2,5}$/

身份证 /^[1234568]\d{16}[0-9xX]$/

邮箱 /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;

手机号 /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/

鼠标点击，出现绿色文字提示

鼠标离开，若值为空，出现红色提示；若输入的值与正则无法匹配，出现提示框；若匹配成功，则格式正确

创建变量n，赋值为0，有一个验证成功就++，最终如果n的值为7，且最下方的勾选框已勾选就登陆成功。若n!=7，弹窗提示将内容填写文字；若勾选框未勾选，弹窗提示先勾选。

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注册登陆页面</title>
</head>
<link rel="stylesheet" type="text/css" href="index.css">
<body>
	<form action="#" id="fm" method="">
		<div id="main" class="main">
			<div id="div1" class="div1">
				<h2>- - 账户信息 - -</h2>
			</div>
			<div class="div2">
				<span>用户名&nbsp;&nbsp;</span>
				<input type="text" name="name1" id="name1" placeholder="用户设置成功后不可修改">
				<p id="p1">
					
				</p>
			</div>
			<div class="div3">
				<span>登陆密码</span>
				<input type="password" name="password" id="password1" placeholder="6-20位字母，数字或符号">
				<p id="p2">
					
				</p>
			</div>
			<div class="div4">
				<span>确认密码</span>
				<input type="password" name="password" id="password2" placeholder="请再次输入密码">
				<p id="p3">
					
				</p>
			</div>
			<div class="div5">
				<span>姓名&nbsp;&nbsp;&nbsp;&nbsp;</span>
				<input type="text" name="name2" id="name2" placeholder="请输入姓名，中文且最多五位">
				<p id="p4">
					
				</p>
			</div>
			<div class="div6">
				<span>身份证号</span>
				<input type="text" name="idno" id="idno" placeholder="请输入身份证号">
				<p id="p5">
					
				</p>
			</div>
			<div class="div7">
				<span>邮箱&nbsp;&nbsp;&nbsp;&nbsp;</span>
				<input type="email" name="email" id="email" placeholder="请输入正确邮箱格式">
				<p id="p6">
					
				</p>
			</div>
			<div class="div8">
				<span>手机号码</span>
				<input type="text" name="number" id="number" placeholder="请输入您的手机号码">
				<p id="p7">
					
				</p>
			</div>
			<footer class="foot">
				<input type="checkbox" id="checkbox" name="checkbox" class="inp1">
				我已阅读并同意遵循规定
				<input type="submit" value="确认提交" class="inp2">
			</footer>
		</div>
	</form>
</body>
<script type="text/javascript" src="index.js"></script>
</html>

CSS部分

*{
	margin:0 auto;
	padding:0;
}

/*设置整个页面的背景颜色，透明度为0.7的灰色*/
body{
	background-color: rgba(215,215,215,0.7);
}

/*设置整个内容div的宽高，，左右边距和圆角*/
.main{
	width:750px;
	height:850px;
	margin-top:50px;
	margin-bottom: 30px;
	border-radius: 10px 10px 10px 10px;
}

/*设置内容的背景颜色为白色，上外边距为20像素*/
div{
	background-color: white;
	margin-top:20px;
}

/*为整个登陆注册页面的标题账户信息设置大小，背景颜色和字体颜色，居中，圆角*/
.div1{
	width:100%;
	height:50px;
	background-color: #6385D1;
	color:white;
	text-align: center;
	line-height: 50px;
	border-radius: 10px 10px 0 0;
}

/*设置文本框的大小，圆角，边框，字体大小*/
input{
	width:350px;
	height:40px;
	font-size:18px;
	border-radius: 5px;
	border:1px solid rgba(200,200,200,0.9);
}

/*div标签下的input标签鼠标获得焦点显示阴影*/
div>input:focus{
	box-shadow: 1px 1px 5px 5px #6385D1;
	/*元素周边轮廓去掉*/
	outline: none;
}

/*设置文本框前文字的字体，位置*/
span{
	font-weight: bold;
	font-size:18px;
	margin-left: 40px;
}

/*在每个文本框文字前添加"*"，颜色为蓝色*/
span::before{
	content: "* ";
	color:#6385D1;
}

/*设置p标签的高度*/
p{
	height:30px;
	margin-left:50px;
	margin-top:10px;
	color:green;
}

/*上外边距20像素*/
footer{
	margin-top:20px;
}

/*设置底部遵循规定框的大小，居中，圆角,上边框线*/
.foot{
	width:100%;
	height:50px;
	line-height: 50px;
	text-align: center;
	letter-spacing: 2px;
	border-top:2px solid #696969;
	border-radius: 0 0 10px 10px;
}

/*设置复选框的大小*/
.inp1{
	width:15px;
	height: 15px;
	margin-right: 20px;
}

/*设置提交文本框的大小,颜色,背景颜色和字体大小*/
.inp2{
	width:100px;
	height:30px;
	font-size:14px;
	color:white;
	background-color: #6385D1;
}

JS部分

// 6-18位数字字母下划线
var regexp1=/^[0-9a-zA-Z_]{6,18}$/;
// 6-20位字母数字符号
var regexp2=/^\S{6,20}$/;
var regexp3=/^\S{6,20}$/;
// 中文且最多5位
var regexp4=/^[\u4e00-\u9fa5]{2,5}$/;
// 18位,1234568开头,结尾可以为数字和字母x
var regexp5=/^[1234568]\d{16}[0-9xX]$/;
// 邮箱格式
var regexp6=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
// 11位
var regexp7=/^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;

var name1=document.getElementById("name1"),
	password1=document.getElementById("password1"),
	password2=document.getElementById("password2"),
	name2=document.getElementById("name2"),
	idno=document.getElementById("idno"),
	email=document.getElementById("email"),
	number=document.getElementById("number"),
	p1=document.getElementById("p1"),
	p2=document.getElementById("p2"),
	p3=document.getElementById("p3"),
	p4=document.getElementById("p4"),
	p5=document.getElementById("p5"),
	p6=document.getElementById("p6"),
	p7=document.getElementById("p7");

// 输入格式正确次数
var num=0;

// 获得焦点,p标签中添加文本内容,字体颜色为绿色
name1.onfocus=function(){
	p1.innerHTML="请输入6-18位数字,字母,下划线_";
}

password1.onfocus=function(){
	p2.innerHTML="请输入6-20位字母,数字,下划线_";
}

password2.onfocus=function(){
	p3.innerHTML="请确认两次密码一致";
}

name2.onfocus=function(){
	p4.innerHTML="请输入中文姓名";
}

idno.onfocus=function(){
	p5.innerHTML="请输入您的身份证号";
}

email.onfocus=function(){
	p6.innerHTML="请输入您的邮箱";
}

number.onfocus=function(){
	p7.innerHTML="请输入您的手机号";
}

// 失去焦点,判断,若为空则显示为空,字体红色;若输入的内容与所需要内容不匹配则显示格式不正确
name1.onblur=function(){
	if(name1.value==""){
		p1.innerHTML="用户名称不能为空";
		p1.style.color="red";
	}else if(regexp1.test(name1.value)==false){
		p1.innerHTML="请输入6-18位数字,字母,下划线_";
		p1.style.color="red";
	}else{
		p1.innerHTML="格式正确!";
		p1.style.color="green";
		num++;
	}
}

password1.onblur=function(){
	if(password1.value==""){
		p2.innerHTML="密码不能为空";
		p2.style.color="red";
	}else if(regexp2.test(password1.value)==false){
		p2.innerHTML="请输入6-20位字母,数字,下划线_";
		p2.style.color="red";
	}else{
		p2.innerHTML="格式正确!";
		p2.style.color="green";
		num++;
	}
}

password2.onblur=function(){
	if(password2.value==""){
		p3.innerHTML="确认密码不能为空";
		p3.style.color="red";
	}else if(password2.value==password1.value){
		p3.innerHTML="确认密码正确!";
		p3.style.color="green";
		num++;
	}else{
		p3.innerHTML="两次密码不同";
		p3.style.color="red";
	}
}

name2.onblur=function(){
	if(name2.value==""){
		p4.innerHTML="姓名不能为空";
		p4.style.color="red";
	}else if(regexp4.test(name2.value)==false){
		p4.innerHTML="请输入正确的中文名字";
		p4.style.color="red";
	}else{
		p4.innerHTML="姓名正确!";
		p4.style.color="green";
		num++;
	}
}

idno.onblur=function(){
	if(idno.value==""){
		p5.innerHTML="身份证不能为空";
		p5.style.color="red";
	}else if(regexp5.test(idno.value)==false){
		p5.innerHTML="身份证格式不对";
		p5.style.color="red";
	}else{
		p5.innerHTML="身份证正确";
		p5.style.color="green";
		num++;
	}
}

email.onblur=function(){
	if(email.value==""){
		p6.innerHTML="邮箱不能为空";
		p6.style.color="red";
	}else if(regexp6.test(email.value)==false){
		p6.innerHTML="邮箱格式不对";
		p6.style.color="red";
	}else{
		p6.innerHTML="邮箱正确";
		p6.style.color="green";
		num++;
	}
}

number.onblur=function(){
	if(number.value==""){
		p7.innerHTML="手机号不能为空";
		p7.style.color="red";
	}else if(regexp7.test(number.value)==false){
		p7.innerHTML="手机号格式不对";
		p7.style.color="red";
	}else{
		p7.innerHTML="手机号正确";
		p7.style.color="green";
		num++;
	}
}

// 判断,输入格式正确的次数，如果格式都正确，num的值应该为7。若不为7，返回错误，弹窗跳出提示填写完整。若值为7，在判断勾选框是否勾选，勾选即成功，没有勾选则弹窗提示请勾选。
var fm=document.getElementById("fm");
fm.onsubmit=function(){
	if(num!=7){
		alert("请将信息填写完整!")
		return false;
	}else if(checkbox.checked){
		alert("登记成功!");
		return true;
	}else{
		alert("请勾选已阅读!");
		return false;
	}
}

平安喜乐Alice

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
注册登陆页面

效果图1、 HTML搭建框架，前端页面显示2、 css设置样式，鼠标获得焦点文本框显示阴影3、 js，使用正则表达式验证用户名 /^[0-9a-zA-Z_]{6,18}$/密码 /^\S{6,20}$/姓名 /^[\u4e00-\u9fa5]{2,5}$/身份证 /^[1234568]\d{16}[0-9xX]$/邮箱 /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;手机号 /^1([358][0-9]|4
复制链接

扫一扫