学习写js版的登录验证码

学习写js版的登录验证码

直接上代码,结果四处碰壁，于是上网看大神的代码，改了改

<script>
	/** 
	 *验证码生成和判断js版
	**/
    /**生成一个随机数**/
    var str; //全局的str
    
    function validate() {
        var inputCode = document.getElementById("input1").value;
        if (inputCode.length <= 0) {
            alert("请输入验证码！");
            return false;
        } else if (inputCode != str) {
            alert("验证码输入错误！"+code);
            document.getElementById("input1").value = "";
            return false;
        createCode();//刷新验证码   
        } else {
        	return true;
        }
    }
    
    function randomNum(min,max){
        return Math.floor( Math.random()*(max-min)+min);
    }
    /**生成一个随机色**/
    function randomColor(min,max){
        var r = randomNum(min,max);
        var g = randomNum(min,max);
        var b = randomNum(min,max);
        return "rgb("+r+","+g+","+b+")";
    }
    drawPic();
    document.getElementById("changeImg").onclick = function(e){
        e.preventDefault();
        drawPic();
    }

    /**绘制验证码图片**/
    function drawPic(){
        var canvas=document.getElementById("canvas");
        var width=canvas.width;
        var height=canvas.height;
        var ctx = canvas.getContext('2d');
        ctx.textBaseline = 'bottom';

        /**绘制背景色**/
        ctx.fillStyle = randomColor(180,240); //颜色若太深可能导致看不清
        ctx.fillRect(0,0,width,height);
        /**绘制文字**/
        str = 'ABCEFGHJKLMNPQRSTWXY123456789';//str在此
        for(var i=0; i<4; i++){
            var txt = str[randomNum(0,str.length)];
            ctx.fillStyle = randomColor(50,160);  //随机生成字体颜色
            ctx.font = randomNum(15,40)+'px SimHei'; //随机生成字体大小
            var x = 10+i*25;
            var y = randomNum(25,45);
            var deg = randomNum(-45, 45);
            //修改坐标原点和旋转角度
            ctx.translate(x,y);
            ctx.rotate(deg*Math.PI/180);
            ctx.fillText(txt, 0,0);
            //恢复坐标原点和旋转角度
            ctx.rotate(-deg*Math.PI/180);
            ctx.translate(-x,-y);
        }
        /**绘制干扰线**/
        for(var i=0; i<8; i++){
            ctx.strokeStyle = randomColor(40,180);
            ctx.beginPath();
            ctx.moveTo( randomNum(0,width), randomNum(0,height) );
            ctx.lineTo( randomNum(0,width), randomNum(0,height) );
            ctx.stroke();
        }
        /**绘制干扰点**/
        for(var i=0; i<100; i++){
            ctx.fillStyle = randomColor(0,255);
            ctx.beginPath();
            ctx.arc(randomNum(0,width),randomNum(0,height), 1, 0, 2*Math.PI);
            ctx.fill();
        }
    }
</script>

虽然没学过js，但是我还是知道它是弱类型语言，并且面向对象，用java的办法也能看懂。
验证码是随机的，所以randomNum()和randomColor()还是很好理解的；
上面是验证图片，他会生成一张随机的图片；

var code; //在全局 定义验证码   
function createCode() {
    code = "";
    var codeLength = 6;//验证码的长度   
    var checkCode = document.getElementById("checkCode");
    var selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,'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');//所有候选组成验证码的字符，当然也可以用中文的   
    for (var i = 0; i < codeLength; i++) {
        var charIndex = Math.floor(Math.random() * 36);
        code += selectChar[charIndex];
    }
    //alert(code);
    if (checkCode) {
        checkCode.className = "code";
        checkCode.value = code;
    }
}

上面这个就光生成数字了（另个大神写的）

具体我是这样写的

<div id=div1 style=" BACKGROUND-COLOR: #ce8483;width: 300px; align-content: center" class="text-center" >
    <form action="${pageContext.request.contextPath}/login.action" onsubmit="return validate();" method="post">

            <div id="box1" class="input-group">
                <span class="input-group-addon">用户名：</span>
                <input id="username" class="form-control" name="username"/>
            </div>
            <div id="box2" class="input-group">
                <span class="input-group-addon">密码：</span>
                <input id="password"   name="password" class="form-control"/>
            </div>
            <div class="input-group" id="box3">
                <span class="input-group-addon">图形验证码：</span>
                <input type="tel" class="form-control" placeholder="请输入图形验证码" id="input1"/>
			</div>
            <div class="text-left">
                <span>
                    <canvas id="canvas" width="120" height="45"></canvas>
                    <a href="#" id="changeImg">看不清，换一张</a>
                </span>
            </div>

            <div style=" BACKGROUND-COLOR: #ce8483;width: 300px;" >
                <div class="pull-left"><button type="submit" class="btn btn-primary"  style="margin-top:1%;background-color:white;color:black;">确认</button></div>
                <div class="pull-left"><button type="reset" class="btn btn-primary"  style="margin-top:1%;background-color:white;color:black;">重置</button></div>
            </div>
    </form>
</div>

结果是这样的

注：

登录界面是个表单，如果你提交表单验证码出错，却没有停止表单上传，这就是个bug。
在button标签里添加onclick判断方法，亲身经历不行。得写在form标签里，写onsubmit="return validate();"。
***最为重要的是***那个return不能少，因为你判断方法里面返回的是true和false，如果不写就没判断效果。