Heim > Artikel > Web-Frontend > Ausführliche Erläuterung von Beispielen für die Implementierung der Verifizierungscodefunktion mithilfe von JavaScript

Ausführliche Erläuterung von Beispielen für die Implementierung der Verifizierungscodefunktion mithilfe von JavaScript

零下一度Original: 2017-04-21 09:56:321452Durchsuche

In diesem Artikel werden hauptsächlich relevante Informationen zur Implementierung der Verifizierungscodefunktion auf Basis von JavaScript vorgestellt.

Das Beispiel in diesem Artikel enthält den spezifischen Code zur Implementierung des Verifizierungscodes in Javascript als Referenz

1. Ein einfaches Beispiel
Neues test.html

<!DOCTYPE html> 
<html>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<head>  
  <title>验证码</title>   
  <script src = "checkCode.js">  </script>  
</head>  
<body>  
  <p>  
    <input type = "text" id = "input"/>  
    <input type = "button" id="code" onclick="createCode()"/>  
    <input type = "button" value = "验证" onclick = "validate()"/>  
  </p>  
</body>  
</html>

Neues checkCode.js

var code ; //在全局定义验证码   
 
window.onload = function createCode(){  
   code = "";   
   var codeLength = 4;//验证码的长度  
   var checkCode = document.getElementById("code");   
   var random = new Array(0,1,2,3,4,5,6,7,8,9,&#39;A&#39;,&#39;B&#39;,&#39;C&#39;,&#39;D&#39;,&#39;E&#39;,&#39;F&#39;,&#39;G&#39;,&#39;H&#39;,&#39;I&#39;,&#39;J&#39;,&#39;K&#39;,&#39;L&#39;,&#39;M&#39;,&#39;N&#39;,&#39;O&#39;,&#39;P&#39;,&#39;Q&#39;,&#39;R&#39;,  
   &#39;S&#39;,&#39;T&#39;,&#39;U&#39;,&#39;V&#39;,&#39;W&#39;,&#39;X&#39;,&#39;Y&#39;,&#39;Z&#39;);//随机数  
   for(var i = 0; i < codeLength; i++) {//循环操作  
    var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）  
    code += random[index];//根据索引取得随机数加到code上  
  }  
  checkCode.value = code;//把code值赋给验证码  
}  
//校验验证码  
function validate(){  
  var inputCode = document.getElementById("input").value.toUpperCase(); //取得输入的验证码并转化为大写     
  if(inputCode.length <= 0) { //若输入的验证码长度为0  
    alert("Empty Code!"); //则弹出请输入验证码  
  }      
  else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时  
    alert("Error Code"); //则弹出验证码输入错误  
    createCode();//刷新验证码  
    document.getElementById("input").value = "";//清空文本框  
  }      
  else { //输入正确时  
    alert("OK"); //弹出^-^  
  }        
}

2 . Beim Anklicken Code, der die Position nicht verschiebt:

6f23bfb838f442699a99d538155cf763b3711640020e1e3c39a7788e2aac1618Sie können nicht klar sehen? 5db79b134e9f6b82c0b36e0489ee08ed94b3e26ee717c64999d7867364b1b4a3

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen für die Implementierung der Verifizierungscodefunktion mithilfe von JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Javascript implementiert einen Beispielcode für ein Dropdown-Menü mit Datumsverknüpfung auf drei EbenenNächster Artikel：Javascript implementiert einen Beispielcode für ein Dropdown-Menü mit Datumsverknüpfung auf drei Ebenen

In Verbindung stehende Artikel

Mehr sehen