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();};

 ???????????????????<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>

 ???????//绑定验证码事件 ???????$("#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("成功"); ???????????// } ?????????});