原生js实现用户登陆验证

最新推荐文章于 2023-12-04 20:58:00 发布

bowlingQ

最新推荐文章于 2023-12-04 20:58:00 发布

阅读量2.7k

点赞数 4

分类专栏：笔记文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_45834446/article/details/103628465

版权

笔记专栏收录该内容

33 篇文章 2 订阅

订阅专栏

目的：我们要想实现利用正则实现用户登陆验证，正确则跳转到个人主页，错误则提示输入错误
在这里插入图片描述
我们会想到用form表单来实现页面的跳转，但使用form表单就无法利用正则来判断输入的数据的正错，无论输入对错，都会跳转到action的页面
所以我们选择利用原生js来实现我们想要的效果

首先我们需要获取输入框的值：
我们还是用到了from表单👵
先给form加个name属性，再给input加个name属性

<form name="form">
				<input type="text" maxlength="11" name="input1">
</form>

然后用js获取输入的值

var x=document.forms["form"]["input1"].value;

然后利用正则判断输入的数据是否正确，通过onclick来触发函数。

var input1=document.getElementById("input1");
var Pattern1=/^1[3|4|5|7|8]\d{9}$/;
input2.onclick=function(){
		jiansuo();
}
function jiansuo(){
	var x=document.forms["form"]["input1"].value;
	if(Pattern1.test(x)){
		alert("您将进入个人 主页")
		window.location.href = "https://www.smartisan.com/";
	}else{
		alert("请输入正确账号")		
	}
}

在js里我们常常使用window.location.href=url；来实现页面的跳转。
——————————————————————————————————————————————
本页面还有很多不足之处，欢迎各界大佬在评论区指出错误。
下面是我的一个小演示。

<head>
	<meta charset="UTF-8">
	<title>futurelogin</title>
	<link rel="stylesheet" type="text/css" href="css/futurelogin.css" />
	<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<body>
	<div class="login">
		<div class="imgb">
			<img src="img/logow.png">
		</div>
		<div class="content">
			<ul>
				<li>
					<h2>使用ID登录</h2></li>
				<li>
					<form name="form">
						<div class="input">
							<span><i class="fa fa-user"></i></span>
							<input id="input1" class="input1" type="text" maxlength="11" name="input1">
						</div>
						<div class="input">
							<span><i class="fa fa-lock"></i></span>
							<input type="password" class="input2">
						</div>
					</form>
					<button id="input2" class="submit"><span class="hd" id="hd"></span> </button>
				</li>
		</div>
		</li>
		</ul>
	</div>
	</div>
	<p>Copyright © 2019 www.wlgzs.net 版权所有</p>
</body>
<script src="js/futurelogin.js"></script>

css部分：
body{
	background-image: url(../img/login.jpg);
	box-sizing: border-box;
	margin: 0;
	z-index: -1;
	background-repeat: repeat;
}
.login{
	background: white;
	width: 400px;
	height: 600px;
	margin: 40px auto 0px;
	border-radius:10px;
	position: relative;
}
.imgb>img{
	width:108px;
	position: absolute;
	margin: 0px auto;	
}
.content{
	position: absolute;
	display: flex;
	justify-content: center;
	left: 0;
	right: 0;
	margin:80px auto;
}
.content>ul{
	padding: 0;
}
.content ul li {
	margin: 40px 0px;
	text-decoration: none;
	list-style: none;
	text-align: center;
}
.content ul li input{
	width:100%;
	outline: none;
	padding: 17px;
	border-radius:0px 3px 3px 0px;
	position: relative;
	right: 8px;
}
.input{
	display: flex;
	border: 1px solid #ccc;
	margin-top: 20px;
	border-radius: 5px;
}
.input:hover{
	box-shadow:0px 0px 2px #333333;
}
.input>span>i{
	padding: 20px 25px 20px 20px;
}
.submit{
	background:#79E0F6;
	margin: 50px auto;
	left: 0;
	right: 0;
	width:300px;
	height:50px;
	border-radius:5px;
	border: 1px solid #FFFBF0;
	color: white;
	outline: none;
}
.submit:hover{
	background:#4ACBEF;
}
.textdenglu{
	color: white;
}
.buttonborder{
	border-radius: 5px;
	border: none;
	outline: none;
	position: relative;
}
button:active{
	background: rgb(48,147,226);
}
p{
	text-align: center;
	color: gray;
	font-size: 10px;
}

.input1{
	border: none;
	border-left: 1px solid #ccc;
}
.input2{
	border: none;
	 border-left: 1px solid #ccc;
}

js部分：
var hd=document.getElementById("hd");
var input1=document.getElementById("input1");
var input2=document.getElementById("input2");
var Pattern1=/^1[3|4|5|7|8]\d{9}$/;
input2.onclick=function(){
		hd.style.display="block";
		jiansuo();
}
function jiansuo(){
	var x=document.forms["form"]["input1"].value;
	if(Pattern1.test(x)){
		alert("您将进入个人 主页")
		window.location.href = "https://www.smartisan.com/";
	}else{
		alert("请输入正确账号")		
	}
}

bowlingQ

关注

4
点赞
踩
22

收藏

觉得还不错? 一键收藏
5
评论
原生js实现用户登陆验证

目的：我们要想实现利用正则实现用户登陆验证，正确则跳转到个人主页，错误则提示输入错误我们会想到用form表单来实现页面的跳转，但使用form表单就无法利用正则来判断输入的数据的正错，无论输入对错，都会跳转到action的页面所以我们选择利用原生js来实现我们想要的效果首先我们需要获取输入框的值：我们还是用到了from表单????先给form加个name属性，再给input加个name属性&l...
复制链接

扫一扫