js+html验证码提交验证

最新推荐文章于 2021-11-04 15:42:31 发布

行以

最新推荐文章于 2021-11-04 15:42:31 发布

阅读量761

点赞数

分类专栏： html js

本文链接：https://blog.csdn.net/vchcia/article/details/93888677

版权

js 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" id="form">
<input type="text" id="me_code">
    <input type="submit">
</form>
<span id="v_code"></span>
</body>
<script>
    // 获取表单整体
    var sub = document.getElementById('form'),
        // 获取显示验证码的span标签
        v_code = document.getElementById('v_code'),
        // 载入源数据
        y = '123456789abcdefghtlionopqrstyvwxyz',
        // 创建验证码容器
        code_box = '',
        // 获取源数据长度
        y_len = y.length;
        // 指定验证码位数
        wei = 60;
        // 创建验证码
        for (i=0; i<wei; i++){
            var s =  Math.floor(Math.random()*36);
            s = s>y_len ? Math.floor(Math.random()*36) : s;
            code_box += y[s];
        }
    //    将验证码载入标签
    v_code.innerText = code_box;
    //    监听提交事件
    sub.onsubmit = function () {
        var me_code = document.getElementById('me_code').value;
        if (me_code === code_box){
            alert('登录成功');
        } else {
            alert('登录失败');
            return false;
        }
    }
</script>
</html>