验证码，省市区三联级

核心：

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

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

 3，注意，在

     
                                      您的浏览器不支持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:

     
                        
      
                            
                               
      
                        
      
                            
       
                                            您的浏览器不支持canvas，请换个浏览器试试~                            
                               
      
                    
     

 

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