JS笔记-前端实现验证码功能

程序运行截图如下：

当输入错误验证码点击登录后

输入正确验证码后，就可以跳转了。

这里主要是使用JS生成了验证码

程序结构如下

源码如下：

vail.js

//高、宽、字符大小、字符集
var w = 80;
var h = 24;
var fontsize = h - 6;
var str = "0123456789abcdefABCDEF";

function randInt(max) {

    return Math.floor(Math.random() * 100000 % max);
}

//生成随机长度字符串
function randCode(len) {

    if(len < 4){

        len = 4;
    }

    var code = "";
    for(var i = 0; i < len; i++){

        code += str.charAt(randInt(str.length));
    }
    return code;
}

function randColor() {

    var r = randInt(256);
    var g = randInt(256);
    var b = randInt(256);
    return "rgb(" + r +"," + g + "," + b + ")";
}

//绘制图片
function drawCode(canvas) {

    var valiCode = randCode(8);
    w = 5 + fontsize * valiCode.length;

    if(canvas != null && canvas.getContext && canvas.getContext("2d")){

        //设置显示区域大小
        canvas.style.width = w;
        //设置画板高度
        canvas.setAttribute("width", w);
        canvas.setAttribute("height", h);
        //得到画笔
        var pen = canvas.getContext("2d");
        //绘制背景
        pen.fillStyle = "rgb(255, 255, 255)";
        pen.fillRect(0, 0, w, h);
        //设置水平位置
        pen.textBaseline = "top";   //middle, bottom
        //绘制内容
        for(var i = 0; i < valiCode.length; i++){

            pen.fillStyle = randColor();
            pen.font = "bold " + (fontsize + randInt(3)) + "px 微软雅黑";
            pen.fillText(valiCode.charAt(i), 5 + fontsize * i, randInt(5));
        }

        //绘制噪音线
        for(var i = 0; i < 2; i++){

            pen.moveTo(randInt(w) / 2, randInt(h));
            pen.lineTo(randInt(w), randInt(h));
            pen.strokeStyle = randColor();
            pen.lineWidth = 2;
            pen.stroke();
        }

        return valiCode;
    }
}

web.xml

<!DOCTYPE web-app PUBLIC
        "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
        "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
    <display-name>Archetype Created Web Application</display-name>
</web-app>

index.jsp

<%--
  Created by IntelliJ IDEA.
  User: cff
  Date: 2020/1/30
  Time: 23:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<h1>SUCCESS</h1>
</body>
</html>

jsVail.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>js</title>
    <style type="text/css">
        .code_a{
            color: #0000ff;
            font-size: 12px;
            text-decoration: none;
            cursor: pointer;
        }
        #cvs{
            cursor: pointer;
        }
    </style>
    <script src="js/vail.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var valicode;
        function changeCode(){
            var cvs = document.getElementById("cvs");
            valicode = drawCode(cvs);
        }
        function valiCode(){
            var code = document.getElementById("inCode").value;
            if(code.toLowerCase() == valicode.toLowerCase()){
                return true;
            }
            else{
                document.getElementById("err").innerHTML = "输入的验证码错误！";
                changeCode();
                return false;
            }
        }
        window.onload = changeCode;
    </script>
</head>

<body>
<form action="index.jsp" method="post">
    <label>验证码：</label>
    <input type="text" id="inCode" name="inCode" />
    <canvas id="cvs" οnclick="changeCode()"></canvas>
    <a class="code_a" οnclick="changeCode()">换一张</a><br/>
    <input type="submit" value="登录" οnclick="return valiCode()" />
</form>
<div style="color:red" id="err"></div>
</body>
</html>

porn.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.example</groupId>
    <artifactId>vailJavaScript</artifactId>
    <version>1.0-SNAPSHOT</version>

    <packaging>war</packaging>

</project>

IT1995

发布了1269 篇原创文章 · 获赞 1970 · 访问量 179万+

他的留言板关注

JS笔记-前端实现验证码功能

猜你喜欢