学习写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,如果不写就没判断效果。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值