验证码

验证码，省市区三联级

核心：

1，这里在修改了原verify.js，在第12行，增加了vfinput.setAttribute("data-canvas",validate)，目的，判断输入与生成验证码的等值

2，表单的居中用了max-width: 500px;

 3，注意，在

                        <canvas id="mycanvas" width='90' height='40'>
                                您的浏览器不支持canvas，请换个浏览器试试~
                        </canvas>

这里设置canvas的高度的时候，我在head里重置了样式：

        #mycanvas {
            cursor: pointer;
            height: 46px;
        }

标签上的height=‘40’要保留，否则，height:46px就会失效。

 4，在省重新赋值的时候，需要用trigger()方法，来触发select的change事件，否则回填的时候显示的是原来的值

$("#province6").trigger("change");

 

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("成功");
            // }
          });

 

预览：

https://besswang.github.io/verify-slim/index.html