JS实现生成随机验证码并验证功能

本文链接： https://blog.csdn.net/nalan77/article/details/85569939

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS实现生成随机验证码并验证功能</title>
    <link rel="stylesheet" href="css/base.css">
    <style>
        #yzm{width: 345px;margin: 20px auto;} .yzmInput,.yzmCode,.yzmUpdate,.yzmSubmit{display: inline-block;height: 35px;line-height: 35px;margin-right: 10px;font-size: 16px;color: #222;}
        .yzmInput{width: 120px;padding: 0 10px;height: 31px;}
        .yzmCode{width: 80px;text-align: center;background: #ccc;text-align: center;}
        .yzmUpdate,.yzmSubmit{cursor: pointer;text-align: center;background: #4676cf;color: #fff;}
        .yzmUpdate{padding: 0 10px;border-radius: 8px;margin-right: 0;}
        .yzmSubmit{display: block;border-radius: 35px;width: 150px;margin: 0 auto;}
    </style>
    <script src="js/js.js"></script>
</head>
<body>
    <form action="" id="yzm">
        <p class="yzmCon clearfix">
            <input type="text" placeholder="请输入验证码" class="yzmInput fl" value="">
            <span class="yzmCode fl"></span>
            <span class="yzmUpdate fl">刷新验证码</span>
        </p>
        <span class="yzmSubmit">提交</span>
    </form>
</body>
</html>

window.οnlοad=function(){
    var yzm=document.getElementById("yzm");
    var yzmInput=yzm.getElementsByClassName("yzmInput")[0];
    var yzmCode=yzm.getElementsByClassName("yzmCode")[0];
    var yzmUpdate=yzm.getElementsByClassName("yzmUpdate")[0];
    var yzmSubmit=yzm.getElementsByClassName("yzmSubmit")[0];    
    var code=""; 
    var yzm=function(){
        return Math.floor(Math.random()*10)+""+Math.floor(Math.random()*10)+""+Math.floor(Math.random()*10)+""+Math.floor(Math.random()*10);
    }
    yzmCode.innerHTML=yzm();
    yzmUpdate.οnclick=function(){
            yzmCode.innerHTML=yzm();        
    }
    code= yzmCode.innerHTML;
    yzmSubmit.οnclick=function(){
        var value=yzmInput.value;        
        if(value==""){
            alert("请输入验证码！");
        }
        else if(value==code){
            alert("验证成功！");
        }else{
            alert("验证码错误，请重新输入！");
        }
    }    
}

JS实现生成随机验证码并验证功能

猜你喜欢