js验证码

Posted 2020-10-14 最爱小虾

verify.js

/*生成4位随机数*/
function rand(){
    var str="abcdefghijklmnopqrstuvwxyz0123456789";
    var arr=str.split("");
    var validate="";
    var ranNum;
    for(var i=0;i<4;i++){
        ranNum=Math.floor(Math.random()*36);   //随机数在[0,35]之间
        validate+=arr[ranNum];
    }
    var vfinput = document.getElementById("vfinput");
    vfinput.setAttribute("data-canvas",validate)
    return validate;
}

/*干扰线的随机x坐标值*/
function lineX(){
    var ranLineX=Math.floor(Math.random()*90);
    return ranLineX;
}

/*干扰线的随机y坐标值*/
function lineY(){
    var ranLineY=Math.floor(Math.random()*40);
    return ranLineY;
}

function clickChange(){
    var mycanvas=document.getElementById(‘mycanvas‘);
    var cxt=mycanvas.getContext(‘2d‘);
    cxt.fillStyle=‘#000‘;
    cxt.fillRect(0,0,90,40);
    
    /*生成干扰线20条*/
    for(var j=0;j<20;j++){
        cxt.strokeStyle=‘#fff‘;
        cxt.beginPath();    //若省略beginPath，则每点击一次验证码会累积干扰线的条数
        cxt.moveTo(lineX(),lineY());
        cxt.lineTo(lineX(),lineY());
        cxt.lineWidth=0.5;
        cxt.closePath();
        cxt.stroke();
    }

    cxt.fillStyle=‘red‘;
    cxt.font=‘bold 20px Arial‘;
    cxt.fillText(rand(),25,25);   //把rand()生成的随机数文本填充到canvas中    
}

clickChange();

/*点击验证码更换*/
mycanvas.onclick=function(e){
    e.preventDefault();   //阻止鼠标点击发生默认的行为
    clickChange();
};

 

html:

                    <div class="col-sm-10">
                        <div class="col-xs-7" style="padding:0;">
                            <input type="text" class="form-control input-lg" id="vfinput" />
                        </div>
                        <div class="col-xs-5">
                            <canvas id="mycanvas" width=‘90‘ height=‘40‘>
                                    您的浏览器不支持canvas，请换个浏览器试试~
                            </canvas>
                        </div>
                    </div>

 

jq验证：

        //绑定验证码事件
        $("#vfinput").blur(function () {
            var inputCode = $("#vfinput").val();
            var codeValue = $("#vfinput").attr("data-canvas")
            console.log(inputCode,codeValue)
            if (inputCode.length <= 0) {
              alert("请输入验证码！");
            }
            else if (inputCode.toLowerCase() != codeValue.toLowerCase()) {
              alert("验证码输入错误！");
              $("#vfinput").val("")
            }
            // else {
            //   alert("成功");
            // }
          });