驗證碼通用模組 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@' 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 < 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 >