JavaScript简易验证码生成以及验证

最新推荐文章于 2022-11-03 10:45:22 发布

小云　　　　

最新推荐文章于 2022-11-03 10:45:22 发布

阅读量144

点赞数

分类专栏： JavaScript html 文章标签： javascript html

本文链接：https://blog.csdn.net/lq24244/article/details/116175597

版权

JavaScript 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

html

9 篇文章 0 订阅

订阅专栏

JavaScript简易验证码生成以及验证

在这里插入图片描述

随机数生成验证码,和输入框数据匹配,根据结果提示用户.
完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #checkCode {
            background: #9e9e9e;

        }
    </style>
</head>
<body>

<table>
    <tr>
        <td><span class="code" id="checkCode"></span></td>
        <td><a href="javascript:;" id="change">看不清,换一张</a></td>
    </tr>
    <tr>
        <td><label>验证码:</label></td>
        <td><input type="text" id="inputCode1"/></td>
    </tr>
    <tr>
        <td><span id="text_show"></span></td>
        <td><input type="button" id="button1" value="确定"></td>
    </tr>
</table>

<script>

    window.onload = function () {
        var change = document.getElementById('change');
        var res1 = document.getElementById("checkCode");
        var text_show = document.getElementById('text_show');
        var inputCode1 = document.getElementById("inputCode1");
        var button1 = document.getElementById("button1");

        //页面刷新时执行一次生成验证码方法
        getCode();

          //随机生成验证码方法
        function getCode() {
            //生成验证码
            //四位数 0-9,,随机生成四位
            var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
            var str = '';
            for (var i = 0; i < 4; i++) {
                var number = Math.round(Math.random() * 9);
                str += arr[number];
            }
            var res = document.getElementById("checkCode");
            res.innerText = str;
        }

          //点击换一张,执行一次
        change.onclick = function () {
            getCode();
        }
        //提示
        button1.onclick = function () {
            if (inputCode1.value === res1.innerText) {
                text_show.innerText = "验证成功";
            } else {
                text_show.innerText = "验证错误";
            }
        }
    }
</script>
</body>
</html>

小云　　　　

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript简易验证码生成以及验证

JavaScript简易验证码生成以及验证随机数生成验证码,和输入框数据匹配,根据结果提示用户.完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #checkCode { background: #9e9e9e;
复制链接

扫一扫