奇妙数据

js实现网页上简单的验证码系统
验证码是网站上常用的注册,登录等行为的验证机制,可以很简单的避免机器注册等行为发生,下面记录的是html中利用js...
扫描右侧二维码阅读全文
15
2018/10

js实现网页上简单的验证码系统

验证码是网站上常用的注册,登录等行为的验证机制,可以很简单的避免机器注册等行为发生,下面记录的是html中利用js设计验证码系统的实现过程

实现效果

yzm1.png

yzm2.png

yzm3.png

yzm4.png

代码示例

<html>
<head>
<style>
#code{  
                font-family:Arial;  
                font-style:italic;  
                font-weight:bold;  
                border:0;  
                letter-spacing:2px;  
                color:blue;  
            }
</style>
</head>
<script>
    var code;
    function createCode(){
        var code = '';
        var codeview = document.getElementById('code');
        var codeLength = 4; //设置验证字符的长度
        //设置随机字符范围
        var random = 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');
        //设置验证码长度,比如这里用的4位验证码
        for(var i = 0; i < codeLength; i++){
             var index = Math.floor(Math.random()*36);//设置随机数范围,这设置为0 ~ 36
             code += random[index]; //字符串拼接 将每次随机的字符 进行拼接
        }
       codeview.value = code;//将生成的验证码传给code框显示
    }

    //验证码有效性验证
    function validate(){
        if(form.yzm.value=='')
        {
            alert('验证码不得为空');
        }
        else if(form.yzm.value != form.code.value)
        {
            alert('验证码不正确,请重新输入');
        }
        else
        {
            alert('验证码输入正确');
        }
    }

    //设置此处用于打开网页即显示验证码,不设置的话需要点击才出现验证码
    window.onload = function (){

        createCode();
    }
</script>
<div id="message">
<form action="https://blog.mioshu.com/" name="form" method="post" onSubmit="return validate(this)";>
    <input type = "text" id = "input" name = "yzm"/>  
    <input type = "button" id= "code" name = "code" onclick="createCode()"/>  
    <input type = "button" value = "验证" onclick = "validate()"/>  
</form>
</div>
</html>
最后修改:2018 年 10 月 23 日 03 : 10 PM
如果觉得我的文章对你有用,请随意赞赏

发表评论