我從網(wǎng)上查資料炮障，發(fā)現(xiàn)一般都是由java實(shí)現(xiàn)的登陸驗(yàn)證倍奢，今天就想試一下js實(shí)現(xiàn)網(wǎng)頁(yè)登陸驗(yàn)證莺葫，發(fā)現(xiàn)這個(gè)文章蠻好的，于是就分享了出來(lái)蔑赘。
此代碼僅供學(xué)習(xí)，不做商業(yè)用途
<!Doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>驗(yàn)證碼 </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="請(qǐng)輸入賬號(hào)"><br>
<input type="password" name="pwd" class="pwd" placeholder="請(qǐng)輸入密碼"><br>
<p class="yzm"><input type="text" name="code" id="codeInput" class="code" placeholder="驗(yàn)證碼">
<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">
// 聲明一個(gè)變量用于存儲(chǔ)生成的驗(yàn)證碼
document.getElementById('code').onclick = changeImg;
function changeImg(){
// 驗(yàn)證碼組成庫(kù)
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'
);
// 重新初始化驗(yàn)證碼
code ='';
// 隨機(jī)從數(shù)組中獲取四個(gè)元素組成驗(yàn)證碼
for(var i = 0; i<4; i++){
// 隨機(jī)獲取一個(gè)數(shù)組的下標(biāo)
var r = parseInt(Math.random()*arrays.length);
code += arrays[r];
}
// 驗(yàn)證碼寫入span區(qū)域
document.getElementById('code').innerHTML = code;
}
// 驗(yàn)證驗(yàn)證碼
function check(){
var error;
// 獲取用戶輸入的驗(yàn)證碼
var codeInput = document.getElementById('codeInput').value;
if(codeInput.toLowerCase() == code.toLowerCase()){
console.log('123');
return true;
}else{
error = '驗(yàn)證碼錯(cuò)誤缩赛，重新輸入';
document.getElementById('errorTips').innerHTML = error;
return false;
}
}
</script>
</body>
</html>
最終的實(shí)現(xiàn)效果
實(shí)現(xiàn)效果.jpg
