javacscript/jquery生成不規則驗證碼並校驗

時間 2020-02-11
標籤 javacscript jquery 生成不規則驗證碼校驗欄目 JQuery 简体版
原文原文鏈接
所有代碼:html
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../Jquery/jquery-3.2.1.min.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>生成不規則驗證碼</title>
</head>
<body>
    <div style="text-align: center;">
        <form id="private_form" name="own_form">
            <p> <input type="text" name="username" placeholder="input username"> </p>
            <p> <input type="password" name="password" placeholder="input password"> </p>
            
            <div>
                <p style="font-size: 12px;">點擊下圖可刷新驗證碼</p>
                <canvas id="canvas" style="margin-top: 0%; background-color: aquamarine;">
                </canvas>
                <p> <input type="text" name="validateCode" placeholder="輸入圖中的驗證碼" maxlength="5"> </p>
            </div>
            <p> <input type="button" id="own_button" value="OK"> </p>
            
        </form>
    </div>
    
</body>

<script>
    //document.ready
    $(function() {
        main();
    });

    /* global variable */
    var show_num=new Array();

    /**
     * [main description]
     * @return {[type]} [description]
     */
    function main() {
        draw(show_num);
    
        console.log('validate code:'+show_num);
        
        $('#canvas').on('click',function () {
            draw(show_num);
        })
        
        //察看變量類型
        console.log('typeof(show_num): '+typeof(show_num+''));

        //點擊校驗驗證碼
        $('#own_button').click(function() {
            verifyValidateCode();
        });
    }

    /**
     * 校驗驗證碼是否匹配
     * 
     * [verifyValidateCode description]
     * @return {[type]} [description]
     */
   function verifyValidateCode() {
            // 表單ID
            var v=document.forms['own_form']['validateCode'].value;
            if (v==''||v==null) {
                alert('驗證碼未輸入');
                return;
            }
            v=v.toLowerCase();

            var vcStr=show_num+'';
            vcStr=vcStr.toLowerCase();
            vcStr=vcStr.replace(/,/g,'');//去除字符串中的全部逗號

            console.log('typeof(vcStr):'+typeof(vcStr))
            console.log('提交的驗證碼: '+vcStr);
            console.log(v===vcStr);

            if (v===vcStr) {
                console.log('驗證碼正確')
                return true;
            }else{
                alert('輸入的驗證碼錯誤')
                return false;
            }

    }

    /**
     * [draw description] 繪製驗證碼於畫布
     * @param  {[type]} show_num [description]
     * @return {[type]}          [description]
     */
    function draw(show_num) {
            var canvas_width=$('#canvas').width();
            var canvas_height=$('#canvas').height();
            
            var canvas=document.getElementById('canvas');
            
            var context=canvas.getContext("2d");//獲取canvas畫圖的環境
            
            canvas.width=canvas_width;
            canvas.height=canvas_height;
            
            var srcCode="A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z"+
            ",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"+
            ",1,2,3,4,5,6,7,8,9,0";
            
            var aloneCode=srcCode.split(',');
            //console.log('aloneCode- '+aloneCode);
            var aloneCodeLen=aloneCode.length;
            
            for (var index = 0; index <= 4; index++) {
                var j=Math.floor(Math.random()*aloneCodeLen);//獲得隨機的索引
                var txt=aloneCode[j];
                //console.log("txt- "+txt);

                show_num[index]=txt;
                
                var deg=Math.random()*30*Math.PI/180;//產生0~30的隨機弧度
                
                var x=10+index*36;//字符在canvas上的x座標
                var y=20+Math.random()*8;//字符在canvas上的y座標
                
                context.font="bold 33px 微軟雅黑";
                context.translate(x+5,y+5);
                context.rotate(deg);
                context.fillStyle=randomColor();
                context.fillText(txt,0,0);
                context.translate(-x+10*1.5,-y+10*2.5);
                context.rotate(-deg);
            }
            
            //驗證碼上顯示線條
            for (var index = 0; index <= 5; index++) {
                context.strokeStyle=randomColor(); //stroke 一擊,輕觸,撫摸
                context.beginPath();
                context.moveTo(Math.random()*canvas_width,Math.random()*canvas_height);
                context.lineTo(Math.random()*canvas_width,Math.random()*canvas_height);
                context.stroke();
            }
            
            //驗證碼上顯示小點
            for (var index = 0; index < 60; index++) {
                context.strokeStyle=randomColor();
                context.beginPath();
                var x=Math.random()*canvas_width;
                var y=Math.random()*canvas_height;
                
                context.moveTo(x,y);
                context.lineTo(x+1,y+1);
                context.stroke();
            }
            
            
        }

        /**
         * 獲得隨機的顏色值
         * @return {[type]} [description]
         */
        function randomColor() {
            var r=Math.floor(Math.random()*256);
            var g=Math.floor(Math.random()*256);
            var b=Math.floor(Math.random()*256);
              
            return 'rgb('+r+','+g+','+b+','+')';
        }
        
</script>

</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。