js簡單驗證碼的生成和驗證

2021-09-07 16:17:47 字數 3100 閱讀 3522

如何用js生成簡單驗證碼,並驗證是否正確的方法

1、html頁面如下

<

div>

<

table

border

="0"

cellspacing

="5"

cellpadding

="5"

>

<

tr>

<

td>

<

div

id="checkcode"

class

="code"

onclick

="createcode(4)"

>

div>

td>

<

td>

<

span

onclick

="createcode(4)"

>看不清換一張

span

>

td>

tr>

<

tr>

<

td>驗證碼:

td>

<

td><

input

type

="text"

id="inputcode"

style

="float:left;"

/>

td>

tr>

<

tr>

<

td>

td>

<

td><

input

type

="button"

onclick

="validatecode()"

value

="確定"

/>

td>

tr>

table

>

div>

2、js指令碼如下

//

頁面載入時,生成隨機驗證碼

window.οnlοad=function

()

//生成驗證碼的方法

function

createcode(length)

if(checkcode)

}//檢查驗證碼是否正確

function

validatecode()

else

if (inputcode.touppercase() !=checkcode.touppercase())

else

}

3、驗證碼效果圖如下:

注:createcode可以傳遞引數,決定生成驗證碼的位數

4、整體demo原始碼:

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>js簡單驗證碼使用

title

>

<

style

>

.code

span

span:hover

style

>

head

>

<

script

>

//頁面載入時,生成隨機驗證碼

window.onload

=function

()

//生成驗證碼的方法

function

createcode(length)

if(checkcode)

}//檢查驗證碼是否正確

function

validatecode()

else

if(inputcode.touppercase()

!=checkcode.touppercase())

else

}

script

>

<

body

>

<

div>

<

table

border

="0"

cellspacing

="5"

cellpadding

="5"

>

<

tr>

<

td>

<

div

id="checkcode"

class

="code"

onclick

="createcode(4)"

>

div>

td>

<

td>

<

span

onclick

="createcode(4)"

>看不清換一張

span

>

td>

tr>

<

tr>

<

td>驗證碼:

td>

<

td><

input

type

="text"

id="inputcode"

style

="float:left;"

/>

td>

tr>

<

tr>

<

td>

td>

<

td><

input

type

="button"

onclick

="validatecode()"

value

="確定"

/>

td>

tr>

table

>

div>

body

>

html

>

驗證碼一(驗證碼生成)

根據手機好查詢密碼 return type description code for i 0 i 6 i 4位驗證碼也可以用rand 1000,9999 直接生成 將生成的驗證碼寫入session,備驗證時用 session start session verify num code 建立,定義顏色...

驗證碼 簡單驗證碼識別

這裡的驗證碼是內容非常簡單的,結構非常清晰的 這裡的驗證碼是內容非常簡單的,結構非常清晰的 這裡的驗證碼是內容非常簡單的,結構非常清晰的 興之所至之所以說簡單,我覺得是這樣的 抽了五張驗證碼扔進ps,50 透明度,長這樣 只有數字為內容 每張圖的數字都在固定位置 沒有太大的干擾因素 數字字型,形態完...

生成驗證碼

在此處放置使用者 以初始化頁面 bitmap image new bitmap int math.ceiling validatenum.length 12.5 22 graphics g graphics.fromimage image tryfinally region web 窗體設計器生成的...