JavaScript實現隨機碼的生成與校驗
JavaScript之隨機碼的生成與校驗，供大傢參考，具體內容如下
由於獲取事件源有兩種寫法，所以在此處都附上：
這個是直接用var去定義的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隨機驗證碼校驗</title>
<style type="text/css">
#code{
width: 100px;
height: 100px;
background-color: #ddd;
padding: 10px;
line-height: 100px;
text-align: center;
font-size: 20px;
color: red;
/*font-weight: bold;*/
}
</style>
</head>
<body>
<div id="code"></div>
<input type="text" name="" id="newCode">
<input type="button" name="" id="validate" value="驗證">
<script type="text/javascript">
window.onload = function (){
var code;
// 1.獲取對應的標簽
var codeDiv = document.getElementById("code");
var newCodeInput = document.getElementById("newCode");
var validate = document.getElementById("validate");
// 加載頁面獲取對應驗證碼
creatCode()
// 1.獲取min到max之間的整數 1~100
function random(max,min){
return Math.floor(Math.random()*(max-min)+min);
}
function creatCode(){
code = "";
// 設置長度
var codeLenth = 4;
var randomCode =[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<codeLenth;i++){
// 設置隨機范圍36范圍
var index = random(0,36);
code += randomCode[index];
}
codeDiv.innerHTML = code;
}
// 驗證按鈕校驗
validate.onclick = function (){
// 獲取輸入用戶的驗證碼
var newCode = newCodeInput.value.toUpperCase();
if (newCode === code){
// 驗證成功 跳轉對應的網址
window.location.href = "http://www.baidu.com";
}else {
// 驗證失敗
alert("驗證失敗，請重新輸入")
// 輸入框置空
newCodeInput.value = "";
// 重新獲取驗證碼
creatCode();
}
}
}
</script>
</body>
</html>
這個是用function定義變量的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隨機驗證碼校驗</title>
<style type="text/css">
#code{
width: 100px;
height: 100px;
background-color: #ddd;
padding: 10px;
line-height: 100px;
text-align: center;
font-size: 20px;
color: red;
/*font-weight: bold;*/
}
</style>
</head>
<body>
<div id="code"></div>
<input type="text" name="" id="newCode">
<input type="button" name="" id="validate" value="驗證">
<script type="text/javascript">
window.onload = function (){
var code;
// 1.獲取對應的標簽(獲取事件源)
function $(id){
return typeof id === "string"?document.getElementById(id):null;
}
// 加載頁面獲取對應驗證碼
creatCode()
// 1.獲取min到max之間的整數 1~100
function random(max,min){
return Math.floor(Math.random()*(max-min)+min);
}
function creatCode(){
code = "";
// 設置長度
var codeLenth = 4;
var randomCode =[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<codeLenth;i++){
// 設置隨機范圍36范圍
var index = random(0,36);
code += randomCode[index];
}
$("code").innerHTML = code;
}
// 驗證按鈕校驗
$("validate").onclick = function (){
// 獲取輸入用戶的驗證碼
var newCode = $("newCode").value.toUpperCase();
if (newCode === code){
// 驗證成功 跳轉對應的網址
window.location.href = "http://www.baidu.com";
}else {
// 驗證失敗
alert("驗證失敗，請重新輸入")
// 輸入框置空
$("newCode").value = "";
// 重新獲取驗證碼
creatCode();
}
}
}
</script>
</body>
</html>
兩種方式所實現效果一樣。附上效果圖：
當輸入錯誤的數據進行驗證時，會提示：
當輸入正確的數據進行驗證時，點擊驗證，如果驗證成功，會跳轉指定路徑。
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。