html前端登录验证码,前端登录页面开发_js生成验证码并验证
/p>
前端集成開發(fā)工具: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: #34495e;
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;
}
登錄
忘記密碼了
// 聲明一個(gè)變量用于存儲生成的驗(yàn)證碼
document.getElementById(‘code’).οnclick=changeImg;
functionchangeImg(){
// 驗(yàn)證碼組成庫
vararrays=newArray(
‘1’,’2′,’3′,’4′,’5′,’6′,’7′,’8′,’9′,’0′,
‘a(chǎn)’,’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(vari=0; i<4; i++){
// 隨機(jī)獲取一個(gè)數(shù)組的下標(biāo)
varr=parseInt(Math.random()*arrays.length);
code+=arrays[r];
}
// 驗(yàn)證碼寫入span區(qū)域
document.getElementById(‘code’).innerHTML=code;
}
// 驗(yàn)證驗(yàn)證碼
functioncheck(){
varerror;
// 獲取用戶輸入的驗(yàn)證碼
varcodeInput=document.getElementById(‘codeInput’).value;
if(codeInput.toLowerCase() ==code.toLowerCase()){
console.log(‘123’);
returntrue;
}else{
error=’驗(yàn)證碼錯(cuò)誤，重新輸入’;
document.getElementById(‘errorTips’).innerHTML=error;
returnfalse;
}
}
總結(jié)
以上是生活随笔為你收集整理的html前端登录验证码,前端登录页面开发_js生成验证码并验证的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html怎么加载xml文档,在html中
- 下一篇： html 超链接 ppt,HTML超链接