技術標籤：html5

點選按鈕獲取驗證碼，文字框失去焦點判斷驗證碼是否輸入正確。

html：

<input type="text" name="" id="text" />
<div id="VerCode"></div>
<button type="button" id="ver">獲取驗證碼</button>

css:

#text {
	width: 200px;
	height: 25px;
	float:
 
 left;
}

#VerCode {
	width: 100px;
	height: 25px;
	background-color: #10C593;
	float: left;
}

js:

var txt = document.getElementById("text");
var VerCode = document.getElementById("VerCode");
var ver = document.getElementById("ver");

ver.onclick = function() {
	// 獲取字母,數字
	var
 
 xA = String.fromCharCode(parseInt(Math.random() * (90 - 65 + 1) + 65));
	var xa = String.fromCharCode(parseInt(Math.random() * (122 - 97 + 1) + 97));
	var x = parseInt(Math.random() * 10);

	// 把字母數字新增到陣列中
	var arr = [xA, xa, x, x];
	//定義空陣列，用來存放隨機排序資料
	var arr2 = [];
	// VerCode.innerHTML=arr;

	for (var i =
 
 0; i < 4; i++) {
		var n = parseInt(Math.random() * 4);
		arr2[i] = arr[n];
	}
	var str = arr2.join("");
	VerCode.innerHTML = str;
}

//文字框失去焦點事件
txt.onblur = function() {
	//獲取文字框內容
	var txtStr = txt.value.toLowerCase();
	// console.log(typeof txtVa);

	//獲取div內容
	var verStr = VerCode.innerHTML.toLowerCase();
	// console.log(verStr);

	//驗證判斷
	if (txtStr == verStr) {
		VerCode.innerHTML = "驗證成功";
	} else {
		VerCode.innerHTML = "驗證失敗";
	}
}