jQuery 郵箱輸入驗證碼

$(function() {
// 初始化驗證碼
var code = new Array(); // 定義一個數(shù)組用于存放驗證碼
var codeLength = 6; // 驗證碼的長度
var checkCode = $("#verify-code"); // 獲取驗證碼輸入框元素
generateCode(); // 初始化生成驗證碼
// 綁定驗證碼刷新事件
$("#refresh-code").click(function() {
generateCode();
});
// 綁定驗證碼輸入事件
checkCode.on("input propertychange", function() {
var verifyCode = $(this).val(); // 獲取用戶輸入的驗證碼
if(verifyCode.length == codeLength) { // 判斷輸入的驗證碼長度是否為6
for(var i = 0; i < codeLength; i++) {
if(verifyCode[i] != code[i]) { // 判斷每一位驗證碼是否正確
checkCode.val(""); // 清空輸入框
alert("驗證碼輸入錯誤，請重新輸入！");
generateCode(); // 重新生成驗證碼
break;
}
if(i == codeLength - 1) {
alert("驗證碼輸入正確！");
checkCode.attr("disabled", true); // 將輸入框禁用
}
}
}
});
// 驗證碼生成函數(shù)
function generateCode() {
code.splice(0, code.length); // 清空驗證碼數(shù)組
for(var i = 0; i < codeLength; i++) {
var randomCode = Math.floor(Math.random() * 10); // 產(chǎn)生0~9的隨機(jī)數(shù)
code.push(randomCode); // 存放到驗證碼數(shù)組中
}
$("#verify-code-text").text(code.join("")); // 將驗證碼展示到頁面上
checkCode.val(""); // 清空輸入框
checkCode.attr("disabled", false); // 將輸入框啟用
}
});

以上就是 jQuery 郵箱輸入驗證碼的實現(xiàn)代碼，供大家參考。