我从网上查资料，发现一般都是由java实现的登陆验证，今天就想试一下js实现网页登陆验证，发现这个文章蛮好的，于是就分享了出来。
此代码仅供学习，不做商业用途
<!Doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>验证码 </title>
<style type="text/css">
*{
margin:0;
padding:0;
}
a{
text-decoration: none;
}
.main_bar{
width:100%;
height: 350px;
margin-top:200px;
}
.login_form{
width:30%;
height:80%;
margin:0 auto;
/*border:2px solid #16A085;*/
border-radius: 15px;
padding:10px;
background: #ECF0F1;
}
.name,.pwd,.sbm_btn{
display:block;
width:70%;
margin:0 auto;
height:35px;
font-size:16px;
border-color:transparent;
border-radius: 5px;
border:0;
padding-left:8px;
}
.yzm{
height: 35px;
margin:0 auto;
width: 72%;
line-height: 35px;
position: relative;
margin-bottom: 10px;
}
.code{
width:50%;
height: 35px;
border:0;
border-color: transparent;
font-size:16px;
border-radius: 5px;
padding-left: 8px;
}
.code_pic{
display: block;
width:40%;
height:35px;
background-color: #0381ff;
color:#FFF;
position: absolute;
top: 0px;
left:60%;
border-radius: 5px;
text-align: center;
}
.name{
margin-top:20px;
}
.sbm_btn{
text-align: center;
background-color: #1abc9c;
color:#fff;
line-height: 35px;
}
.re_pwd {
width: 25%;
margin: 10px auto 10px;
}
.re_pwd a{
text-decoration: none;
font-size:14px;
color: #ccc;
}
.re_pwd a:hover{
cursor: pointer;
color:#16A085;
}
.errorTips{
width:70%;
color:red;
font-size: 14px;
margin:0 auto;
height: 20px;
line-height:20px;
}
</style>
</head>
<body onload="changeImg()">
<div class="main_bar">
<div id="login_form" class="login_form">
<div class="title"></div>
<form action="login.html">
<div id="form_widgt">
<input type="text" name="name" class="name" placeholder="请输入账号"><br>
<input type="password" name="pwd" class="pwd" placeholder="请输入密码"><br>
<p class="yzm"><input type="text" name="code" id="codeInput" class="code" placeholder="验证码">
<span id="code" class="code_pic" title="看不清，换一张"></span></p>
<p class="errorTips" id="errorTips"></p>
<a href="javascript:;" name="sbm" class="sbm_btn" onclick="return check()">登录</a>
</div>
</form>
<div class="re_pwd"><a href="">忘记密码了</a></div>
</div>
</div>
<script type="text/javascript">
// 声明一个变量用于存储生成的验证码
document.getElementById('code').onclick = changeImg;
function changeImg(){
// 验证码组成库
var arrays=new Array(
'1','2','3','4','5','6','7','8','9','0',
'a','b','c','d','e','f','g','h','i','j',
'k','l','m','n','o','p','q','r','s','t',
'u','v','w','x','y','z',
'A','B','C','D','E','F','G','H','I','J',
'K','L','M','N','O','P','Q','R','S','T',
'U','V','W','X','Y','Z'
);
// 重新初始化验证码
code ='';
// 随机从数组中获取四个元素组成验证码
for(var i = 0; i<4; i++){
// 随机获取一个数组的下标
var r = parseInt(Math.random()*arrays.length);
code += arrays[r];
}
// 验证码写入span区域
document.getElementById('code').innerHTML = code;
}
// 验证验证码
function check(){
var error;
// 获取用户输入的验证码
var codeInput = document.getElementById('codeInput').value;
if(codeInput.toLowerCase() == code.toLowerCase()){
console.log('123');
return true;
}else{
error = '验证码错误，重新输入';
document.getElementById('errorTips').innerHTML = error;
return false;
}
}
</script>
</body>
</html>
最终的实现效果
实现效果.jpg
