原生JS制作验证码（优化）

Posted OH-MY-GOD

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生JS制作验证码（优化）相关的知识，希望对你有一定的参考价值。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
请输入验证码:<input type="text" id="yzm">
               <span id="yzm1" style="background: #ccc"></span><br>
               <button id="btn">验证</button>
<!--               <textarea name="" id="" cols="30" rows="10"></textarea>-->
</body>
</html>
    <script>
        var yzm=document.getElementById("yzm"); //获取用户输入的验证码对象
        var yzm1=document.getElementById("yzm1");//获取随机生成的验证码对象
        var btn=document.getElementById("btn"); //获取提交按钮对象
        yzm1.onclick=getyzm; //给span添加点击事件并赋值
        getyzm(); //调用函数
    
        
        function getyzm(){
            var str="123456789qwertyuiopasdfghjklzxcvbnm"; //先定义一个字符串，用来随机从里面取值
            str=str.split(""); //把这个字符串的元素分割成字符串数组
//            console.log(str);
            var zhi="";   //定义一个空的字符串变量用来取值
            for(var i=0;i<4;i++){ //循环四次也就是取四个值
                zhi+=str[parseInt(Math.random()*str.length)];  //取随机数作为下标，+=字符串拼接到值里面去
            }
            yzm1.innerHTML=zhi; //页面中赋值
        }
            btn.onclick=function(){  //通过按钮点击判断
            var zhi1=yzm.value;
            var zhi2=yzm1.innerHTML;
            if(zhi1==zhi2){
                alert("对了");
            }else{
                alert("不对");
            }
        }
    </script>

 

以上是关于原生JS制作验证码（优化）的主要内容，如果未能解决你的问题，请参考以下文章

原生javascript 制作canvas 验证码

原生JS写验证码

简易登录表单的制作，包括用户名密码随机验证码（代码完整，复制即用）

图片验证码制作

php生成各种验证码

PHP初级练习实战之公司留言板（原生）