卖坚果的怪叔叔 卖坚果的怪叔叔
  • 首页
  • 技术
  • 生活
  • 记录
  • 朋友
  • 常用代码
  • 关于
首页 › 技术 › JS生成随机验证码校验(前端)

JS生成随机验证码校验(前端)

坚果大叔
2020-11-12 19:02:27技术阅读数 440

HTML

<div class="box">
    <div class="code" id="checkCode">{{nowCode}}</div>
    <a href="###" @click="changeCode">看不清,换一张</a>
    <input type="text" placeholder="请输入验证码" v-model="inputCode">
    <button id="subBtn" @click="isLegalCode">验证</button>
</div>

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 < codeLength; 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("验证码不正确,请重试!");
    }
}
验证码
赞赏 赞(0)
本文系作者 @坚果大叔 原创发布在 卖坚果的怪叔叔。未经许可,禁止转载。
那些简单实用让你眼前一亮的鼠标滑过样式!
上一篇
晨曦
下一篇
今日天气
摸鱼日历
摸鱼人日历
近期文章
  • 猫🐱
  • Input 空格问题
  • Sort函数小Tips😁😃❤️😒😭😩😳
  • 🌎🌎🌎🌎🌎🌎🌎🌎🌎🌎🌎🌎
  • element-ui中的Select选择器中remote-method方法带自定义参数
归档
  • 2022年6月
  • 2022年5月
  • 2022年4月
  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年12月
  • 2021年11月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年7月
  • 2021年5月
  • 2021年4月
  • 2021年2月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年6月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年12月
  • 2019年11月
  • 2019年10月
  • 2019年9月
  • 2019年8月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年3月
  • 2018年2月
  • 2017年12月
  • 2017年11月
  • 2017年9月
Input 空格问题
2022-06-22 10:52:44
18 0 0
Sort函数小Tips😁😃❤️😒😭😩😳
2022-06-20 15:09:29
18 0 0
element-ui中的Select选择器中remote-method方法带自定义参数
2022-05-27 16:13:19
109 2 1
CSS之GAP属性
2022-05-25 19:28:05
92 2 2
  • 0
博主

一枚佛系前端开发,会一丢丢摄影,喜欢折腾,爱好美食。分享点前端技巧、笔记以及各种有趣的APP和资源教程♥♥

友链
Lieme
公众号
西豆 崔欣 执行上下文 卖坚果的怪叔叔 集赞助手
Copyright © 2017-2022 卖坚果的怪叔叔

苏ICP备18048410号-2
  • 首页
  • 技术
  • 生活
  • 记录
  • 朋友
  • 常用代码
  • 关于
# WordPress # # CSS #
坚果大叔
198
文章
47
评论
116
喜欢