快捷導(dǎo)航

JS自動生成動態(tài)HTML驗(yàn)證碼頁面

更新時間：2017年06月14日 17:30:42 作者：ITCSJ

這篇文章主要介紹了JS自動生成動態(tài)HTML驗(yàn)證碼頁面，輸入錯誤自動清空輸入框的功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文為大家分享了JS自動生成動態(tài)HTML驗(yàn)證碼頁面，輸入錯誤自動清空輸入框功能，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html>
<head>
 <title>驗(yàn)證碼</title>
<meta charset="utf-8" />
<style type="text/css">
 #code {
  font-family: Arial;
  font-style: italic;
  font-weight: bold;
  border: 0;
  letter-spacing: 2px;
  color: blue;
 }
</style>
<script>
 //產(chǎn)生驗(yàn)證碼 
 window.onload = function() {
  createCode()
 }
 var code; //在全局定義驗(yàn)證碼 
 function createCode() {
  code = "";
  var codeLength = 4; //驗(yàn)證碼的長度 
  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'); //隨機(jī)數(shù) 
  for(var i = 0; i < codeLength; i++) { //循環(huán)操作 
  var index = Math.floor(Math.random() * 36); //取得隨機(jī)數(shù)的索引（0~35） 
   code += random[index]; //根據(jù)索引取得隨機(jī)數(shù)加到code上 
  }
  checkCode.value = code; //把code值賦給驗(yàn)證碼 
 }
 //校驗(yàn)驗(yàn)證碼 
 function validate() {
 var inputCode = document.getElementById("ctl00_txtcode").value.toUpperCase(); //獲取輸入框內(nèi)驗(yàn)證碼并轉(zhuǎn)化為大寫  
 if(inputCode.length <= 0) { //若輸入的驗(yàn)證碼長度為0 
  alert("請輸入驗(yàn)證碼！"); //則彈出請輸入驗(yàn)證碼 
 } 
 else if(inputCode != code) { //若輸入的驗(yàn)證碼與產(chǎn)生的驗(yàn)證碼不一致時 
  alert("驗(yàn)證碼輸入錯誤!"); //則彈出驗(yàn)證碼輸入錯誤 
  createCode(); //刷新驗(yàn)證碼 
  document.getElementById("ctl00_txtcode").value = "";//清空文本框 
 } else { //輸入正確時 
  alert("正在登陸"); //彈出 
  }
 }
</script>
</head>
<body>
 <div>
   <!--時間：2017-01-11 描述：輸入框ct100_textcode -->
   <input type="text" id="ctl00_txtcode" />
   <!--時間：2017-01-11 描述：把驗(yàn)證碼定義為按鈕，點(diǎn)擊刷新-->
   <input type="button" id="code" onclick="createCode()" />
   <!--時間：2017-01-11 描述：驗(yàn)證按鈕 -->
   <input type="button" value="驗(yàn)證" onclick="validate()" />
  </div>
 </body
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: