关键词搜索

源码搜索 ×
×

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

发布2020-01-31浏览5913次

详情内容

程序运行截图如下：

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

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

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

 

程序结构如下

源码如下：

vail.js

  1. //高、宽、字符大小、字符集
  2. var w = 80;
  3. var h = 24;
  4. var fontsize = h - 6;
  5. var str = "0123456789abcdefABCDEF";
  6.  
  7. function randInt(max) {
  8.  
  9.     return Math.floor(Math.random() * 100000 % max);
  10. }
  11.  
  12. //生成随机长度字符串
  13. function randCode(len) {
  14.  
  15.     if(len < 4){
  16.  
  17.         len = 4;
  18.     }
  19.  
  20.     var code = "";
  21.     for(var i = 0; i < len; i++){
  22.  
  23.         code += str.charAt(randInt(str.length));
  24.     }
  25.     return code;
  26. }
  27.  
  28. function randColor() {
  29.  
  30.     var r = randInt(256);
  31.     var g = randInt(256);
  32.     var b = randInt(256);
  33.     return "rgb(" + r +"," + g + "," + b + ")";
  34. }
  35.  
  36. //绘制图片
  37. function drawCode(canvas) {
  38.  
  39.     var valiCode = randCode(8);
  40.     w = 5 + fontsize * valiCode.length;
  41.  
  42.     if(canvas != null && canvas.getContext && canvas.getContext("https://cdn.jxasp.com:9143/image/2d")){
  43.  
  44.         //设置显示区域大小
  45.         canvas.style.width = w;
  46.         //设置画板高度
  47.         canvas.setAttribute("width", w);
  48.         canvas.setAttribute("height", h);
  49.         //得到画笔
  50.         var pen = canvas.getContext("https://cdn.jxasp.com:9143/image/2d");
  51.         //绘制背景
  52.         pen.fillStyle = "rgb(255, 255, 255)";
  53.         pen.fillRect(0, 0, w, h);
  54.         //设置水平位置
  55.         pen.textBaseline = "top";   //middle, bottom
  56.         //绘制内容
  57.         for(var i = 0; i < valiCode.length; i++){
  58.  
  59.             pen.fillStyle = randColor();
  60.             pen.font = "bold " + (fontsize + randInt(3)) + "px 微软雅黑";
  61.             pen.fillText(valiCode.charAt(i), 5 + fontsize * i, randInt(5));
  62.         }
  63.  
  64.         //绘制噪音线
  65.         for(var i = 0; i < 2; i++){
  66.  
  67.             pen.moveTo(randInt(w) / 2, randInt(h));
  68.             pen.lineTo(randInt(w), randInt(h));
  69.             pen.strokeStyle = randColor();
  70.             pen.lineWidth = 2;
  71.             pen.stroke();
  72.         }
  73.  
  74.         return valiCode;
  75.     }
  76. }

web.xml

  1. <!DOCTYPE web-app PUBLIC
  2.         "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
  3.         "http://java.sun.com/dtd/web-app_2_3.dtd" >
  4.  
  5. <web-app>
  6.     <display-name>Archetype Created Web Application</display-name>
  7. </web-app>

index.jsp

  1. <%--
  2.   Created by IntelliJ IDEA.
  3.   User: cff
  4.   Date: 2020/1/30
  5.   Time: 23:06
  6.   To change this template use File | Settings | File Templates.
  7. --%>
  8. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  9. <html>
  10. <head>
  11.     <title>Title</title>
  12. </head>
  13. <body>
  14. <h1>SUCCESS</h1>
  15. </body>
  16. </html>

jsVail.jsp

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  3. <html>
  4. <head>
  5.     <title>js</title>
  6.     <style type="text/css">
  7.         .code_a{
  8.             color: #0000ff;
  9.             font-size: 12px;
  10.             text-decoration: none;
  11.             cursor: pointer;
  12.         }
  13.         #cvs{
  14.             cursor: pointer;
  15.         }
  16.     </style>
  17.     <script src="js/vail.js" type="text/javascript" charset="utf-8"></script>
  18.     <script type="text/javascript">
  19.         var valicode;
  20.         function changeCode(){
  21.             var cvs = document.getElementById("cvs");
  22.             valicode = drawCode(cvs);
  23.         }
  24.         function valiCode(){
  25.             var code = document.getElementById("inCode").value;
  26.             if(code.toLowerCase() == valicode.toLowerCase()){
  27.                 return true;
  28.             }
  29.             else{
  30.                 document.getElementById("err").innerHTML = "输入的验证码错误！";
  31.                 changeCode();
  32.                 return false;
  33.             }
  34.         }
  35.         window.onload = changeCode;
  36.     </script>
  37. </head>
  38.  
  39. <body>
  40. <form action="index.jsp" method="post">
  41.     <label>验证码：</label>
  42.     <input type="text" id="inCode" name="inCode" />
  43.     <canvas id="cvs" onclick="changeCode()"></canvas>
  44.     <a class="code_a" onclick="changeCode()">换一张</a><br/>
  45.     <input type="submit" value="登录" onclick="return valiCode()" />
  46. </form>
  47. <div style="color:red" id="err"></div>
  48. </body>
  49. </html>

porn.xml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <project xmlns="http://maven.apache.org/POM/4.0.0"
  3.          xmlns:xsi="http://www.w3.orghttps://cdn.jxasp.com:9143/image/2001/XMLSchema-instance"
  4.          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  5.     <modelVersion>4.0.0</modelVersion>
  6.  
  7.     <groupId>org.example</groupId>
  8.     <artifactId>vailJavaScript</artifactId>
  9.     <version>1.0-SNAPSHOT</version>
  10.  
  11.     <packaging>war</packaging>
  12.  
  13. </project>

 

相关技术文章

最新源码

下载排行榜
点击QQ咨询
开通会员
返回顶部
×
微信扫码支付 元
微信扫码支付
确定支付下载
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载