本文共 2207 字，大约阅读时间需要 7 分钟。
我从网上查资料，发现一般都是由java实现的登陆验证，今天就想试一下js实现网页登陆验证，发现这个文章蛮好的，于是就分享了出来。
此代码仅供学习，不做商业用途
验证码*{
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;
}
// 声明一个变量用于存储生成的验证码
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;
}
}
最终的实现效果
实现效果.jpg
转载地址：https://blog.csdn.net/weixin_39610678/article/details/118121593 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！
发表评论
最新留言
关于作者
