验证码通用模块 javascript版

最新推荐文章于 2020-03-17 22:38:25 发布

小鸿叔

最新推荐文章于 2020-03-17 22:38:25 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： ASP JavaScript / VbScript / HTML JSP 文章标签： javascript html input button function 扩展

本文链接：https://blog.youkuaiyun.com/jyh_jack/article/details/1916347

ASP 同时被 3 个专栏收录

36 篇文章

订阅专栏

JavaScript / VbScript / HTML

30 篇文章

订阅专栏

JSP

16 篇文章

订阅专栏

本文介绍了一种使用JavaScript生成验证码的方法，并提供了完整的代码示例。该方法通过随机选择数字图像来组成验证码，用户可以通过点击图片更换验证码组合。同时，还提供了一个验证用户输入是否正确的函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CheckCode.js

/*
getCheckCode(elementId)生成验证码，将在Id为elementId的HTML元素的innerHTML中写入HTML图片源码
CheckCodeOK("用户输入的验证码") 返回true，即为通过验证
*/
var imgFolderPath="images/CheckCode/";  //存放路径
var fileExt=".gif";  //文件扩展名，要加上圆点的
var imgWidth=15;  //图像宽
var imgHeight=20;  //图像高
var imgFileName=new Array(10); //文件名,不要加扩展名
var CheckCodeStr="";  //存放当前的验证码，可以用来比较
imgFileName[0]="0";
imgFileName[1]="1";
imgFileName[2]="2";
imgFileName[3]="3";
imgFileName[4]="4";
imgFileName[5]="5";
imgFileName[6]="6";
imgFileName[7]="7";
imgFileName[8]="8";
imgFileName[9]="9";

function getCheckCode(elementId)  //生成验证码，将在Id为elementId的HTML元素的innerHTML中写入HTML图片源码
{
    htmlStr="";
    CheckCodeStr=""; //清空原验证码
    for (i=0;i<4;i++)
    {
        num=Math.round(Math.random()*10-0.5);
        CheckCodeStr+=num.toString();
        filePath=imgFolderPath+imgFileName[num]+fileExt;
        htmlStr+="<img border=0 width=@width@ height=@height@ alt='点击更换一组验证码' src='@src@' onclick='getCheckCode("@elementid@")' style='cursor:hand'>";
        htmlStr=htmlStr.replace("@width@",imgWidth);
        htmlStr=htmlStr.replace("@height@",imgHeight);
        htmlStr=htmlStr.replace("@src@",filePath);
        htmlStr=htmlStr.replace("@elementid@",elementId);
    }
    document.getElementById(elementId).innerHTML=htmlStr;
}

function CheckCodeOK(str)
{
    if (str==CheckCodeStr)
    {
        return true;
    }
    else
    {
        return false;
    }
}

test.html