1. 程式人生 > >如何用JavaScript實現獲取驗證碼的效果

如何用JavaScript實現獲取驗證碼的效果

div x11 light php line lse random table syntax

轉自:http://www.php.cn/js-tutorial-411734.html

HTML部分:

1

2

3

4

5

6

7

<body onload=‘createCode()‘>

<div>驗證碼:

<input type = "text" id = "input"/>

<input type="button" id="code" onclick="createCode()" style="width:60px" title=‘點擊更換驗證碼‘ /></br

>

<input type = "button" value = "驗證" onclick = "validate()"/>

</div>

</body>

CSS部分:

1

2

3

4

5

6

7

8

9

#code{

font-family:Arial,宋體;

font-style:italic;

color:green;

border:0;

padding:5px 10px

;

letter-spacing:3px;

font-weight:bolder;

}

JavaScript部分:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

var code ; //在全局定義驗證碼

function createCode(){

code = "";

var codeLength = 4;//驗證碼的長度

var checkCode = document.getElementById("code");

var random = new Array(0,1,2,3,4,5,6,7,8,9,‘A‘,‘B‘,‘C‘,‘D‘,‘E‘,‘F‘,‘G‘,

‘H‘,‘I‘,‘J‘,‘K‘,‘L‘,‘M‘,‘N‘,‘O‘,‘P‘,‘Q‘,‘R‘,‘S‘,‘T‘,‘U‘,‘V‘,‘W‘,‘X‘,‘Y‘,

‘Z‘);//隨機數

for(var i = 0; i < codeLength; i++) {//循環操作

var index = Math.floor(Math.random()*36);//取得隨機數的索引(0~35)

code += random[index];//根據索引取得隨機數加到code上

}

checkCode.value = code;//把code值賦給驗證碼

}

//校驗驗證碼

function validate(){

var inputCode = document.getElementById("input").value.toUpperCase();

//取得輸入的驗證碼並轉化為大寫

if(inputCode.length <= 0) { //若輸入的驗證碼長度為0

alert("請輸入驗證碼!"); //則彈出請輸入驗證碼

}else if(inputCode != code ) { //若輸入的驗證碼與產生的驗證碼不一致時

alert("驗證碼輸入錯誤!"); //則彈出驗證碼輸入錯誤

createCode();//刷新驗證碼

document.getElementById("input").value = "";//清空文本框

}else { //輸入正確時

alert("驗證通過");

}

}

如何用JavaScript實現獲取驗證碼的效果