主要是為了有效防止機器惡意注冊，對某一個特定已注冊用戶用特定程序暴力破解方式進行不斷的登陸嘗試。驗證碼是現在很多網站注冊/登錄時必填的，
雖然對用戶可能有點麻煩，但是對網站/社區來說這個功能還是很有必要，也很重要，不少網站為了防止用戶利用機器人自動注冊、登錄、灌水，都采用了驗證碼技術。
還有在一方面會避免同一時間有大量的用戶同時登入，造成信息處理緩慢
轉載請以超鏈接形式請注明原博客出處，尊重作者，尊重原創！
廢話不多說，直接上代碼，里面有代碼的注釋，方便你的理解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--驗證碼-->
<script language="javascript" type="text/javascript">
var code;
function createCode() { //函數體
code = "";
var codeLength = 5; //驗證碼的長度
var checkCode = document.getElementById("checkCode");
var codeChars = 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',
'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 charNum = Math.floor(Math.random() * 52);//設置隨機產生
code += codeChars[charNum];
}
if (checkCode)
{
checkCode.className = "code";
checkCode.innerHTML = code;
}
}
</script>
</head>
<style>
/*驗證碼*/
.code
{
background-color: silver;
font-family:Arial; /*設置字體*/
font-style:initial;
color:brown;
font-size:20px;
border:0;
padding:2px 3px;
letter-spacing:3px;
font-weight:bolder;
width:81px;
height:23px;
margin-left: 120px;
margin-top: -35px;
}
a
{
text-decoration:none;
font-size:12px;
color:#288bc4;
}
a:hover
{
text-decoration:underline;
}
.yz{
position: absolute;
margin-left: 220px;
margin-top:-10px;
}
</style>
<body onload="createCode()"><!--在頁面加載的同時要加載驗證碼，否則頁面加載完后驗證碼不會顯示 -->
<p>
<label> 驗證碼：</label>
<div class="code" id="checkCode" onclick="createCode()" ></div><a class="yz" href="#" onclick="createCode()">看不清換一張</a>
</p>
<p>
<label>請輸入驗證碼：</label><input id="YZ" name="yz" width="30px;">
</p>
<input class="btttom" type="button" name="OK" id="OK" onclick="GetDom()" value="確認"/>
</body>
<!--驗證-->
<script>
function GetDom(){
if(document.getElementById("YZ").value==""){
alert("驗證碼不能為空！");
createCode();//輸錯一次或提交一次都將會刷新一次驗證碼
return false; //結束本次會話
}else if(document.getElementById("YZ").value.toUpperCase()!=code.toUpperCase()){ //toUpperCase不區分大小寫
alert("您輸入的驗證碼有誤，請重新輸入！！");
createCode();//讀取文件
}
else{
alert("ok");
}
}
</script>
</html>
實驗效果
小禮物走一波；