验证码通用模块 javascript版

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@' οnclick='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

< script  language =javascript  src =CheckCode.js ></ script >

< body  onload ="getCheckCode('CheckCodeImg')" >

< div  id ="CheckCodeImg" >   <!-- 验证码图片出现在此处 --> </ div >

< input  type =button  value ="Click Me"  onclick ="getCheckCode('CheckCodeImg')" >< br >< br >
< input  type =text  name ="CheckCode" >
< input  type =button  value ="Check"  onclick ="if (CheckCodeOK(document.getElementById('CheckCode').value)){alert('OK');}else {alert('error')}" >

</ body >