随机生成验证码软件_JS生成随机验证码校验（前端）

我与我周旋久

于 2021-01-29 04:27:33 发布

阅读量198

点赞数 1

文章标签：随机生成验证码软件

本文链接：https://blog.csdn.net/weixin_34732602/article/details/113370069

版权

点击上方“执行上下文”，选择“置顶公众号”

关键时刻，第一时间送达！

HTML

"box">

"code" id="checkCode">{{nowCode}}

"###" @click="changeCode">看不清，换一张type="text" placeholder="请输入验证码" v-model="inputCode">"subBtn" @click="isLegalCode">验证

CSS

.box {
 width:300px;
 height:150px;
 border:1px solid;
 margin:30px auto;
 position:relative;
}
.code {
 width:120px;
 height:40px;
 background-color:#D6E3BC;
 border:2px solid;
 text-align:center;
 font-size:24px;
 line-height:40px;
 position:absolute;
 top:20px;
 left:20px;
 letter-spacing:3px;
}
a {
 position:absolute;
 left:160px;
 top:30px;
 color:green;
}
input {
 width:180px;
 height:20px;
 top:90px;
 left:20px;
 position:absolute;
}
button {
 width:50px;
 height:26px;
 position:absolute;
 top:90px;
 right:26px;
 background-color:green;
 color:#fff;
 border:1px solid gray;
}

JS

// 生成验证码
createCode () {
    let codeLength = 6; // 验证码长度
    let codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
        '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'); //验证码要随机挑选的字符
    for (var i = 0; i         let charIndex = Math.floor(Math.random() * 52); // 随机产生0-52之间的整数
        this.nowCode += codeChars[charIndex]; 
    }
},
// 切换验证码
changeCode() {
    this.createCode();
},
// 校验验证码
isLegalCode() {
    if (this.inputCode == this.nowCode) {
        alert("验证码正确!");
    } else {
        alert("验证码不正确,请重试!");
    }
}