原生JavaScript实现验证码

最新推荐文章于 2023-04-04 21:31:55 发布

gxhlh

最新推荐文章于 2023-04-04 21:31:55 发布

阅读量457

点赞数 2

分类专栏：原生JavaScript编程练习文章标签：原生JavaScript实现验证码

本文链接：https://blog.csdn.net/qq_44721831/article/details/98253690

版权

原生JavaScript编程练习专栏收录该内容

18 篇文章 2 订阅

订阅专栏

原生JavaScript实现验证码

一，HTML代码

<body onload='createCode()'>
<div id="div1">
    请输入验证码：<input type = "text" id = "input"/>
    验证码：<input type="button" id="code" onclick="createCode()" style="width:60px" title='点击更换验证码' />
    <input type = "button" value = "验证" onclick = "validate()"/>
</div>
</body>

二，CSS代码

    #div1{
        width: 500px;
        height: 100px;
        margin: 150px auto;
    }
    #code{
        font-family:Arial,宋体;
        border:0;
        font-weight: bold;
        padding:2px 3px;
        letter-spacing:3px;
    }

三，JavaScript代码

var code ; //在全局定义验证码

function createCode(){
    code = "";
    var codeLength = 4;//验证码的长度
    var checkCode = document.getElementById("code");
    var random = 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');//随机数
    for(var i = 0; i < codeLength; i++) {//循环操作
        var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）
        code += random[index];//根据索引取得随机数加到code上
    }
    checkCode.value = code;//把code值赋给验证码
}
//校验验证码

function validate(){
    var inputCode = document.getElementById("input").value.toUpperCase(); //取得输入的验证码并转化为大写
    if(inputCode.length <= 0) {
        alert("请输入验证码！");
    }else if(inputCode != code ) {
        alert("验证码输入错误！@_@");
        createCode();//刷新验证码
        document.getElementById("input").value = "";//清空文本框
    }else {
        alert("合格！^-^");
    }
}

四，实现效果

在这里插入图片描述

gxhlh

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生JavaScript实现验证码

原生JavaScript实现验证码一，HTML代码<body onload='createCode()'><div id="div1"> 请输入验证码：<input type = "text" id = "input"/> 验证码：<input type="button" id="code" onclick="createCode(...
复制链接

扫一扫