html前端登录验证码,前端登录页面开发_js生成验证码并验证

/p>

前端集成开发工具:

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;

}

登录

忘记密码了

// 声明一个变量用于存储生成的验证码

document.getElementById(‘code’).οnclick=changeImg;

functionchangeImg(){

// 验证码组成库

vararrays=newArray(

‘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(vari=0; i<4; i++){

// 随机获取一个数组的下标

varr=parseInt(Math.random()*arrays.length);

code+=arrays[r];

}

// 验证码写入span区域

document.getElementById(‘code’).innerHTML=code;

}

// 验证验证码

functioncheck(){

varerror;

// 获取用户输入的验证码

varcodeInput=document.getElementById(‘codeInput’).value;

if(codeInput.toLowerCase() ==code.toLowerCase()){

console.log(‘123’);

returntrue;

}else{

error=’验证码错误，重新输入’;

document.getElementById(‘errorTips’).innerHTML=error;

returnfalse;

}

}