suchen

Heim >Web-Frontend >js-Tutorial >JavaScript generiert automatisch dynamischen HTML-Verifizierungscode

JavaScript generiert automatisch dynamischen HTML-Verifizierungscode

陈政宽～
陈政宽～Original
2017-06-28 12:40:483605Durchsuche

In diesem Artikel wird hauptsächlich die automatische Generierung eines dynamischen HTML-Bestätigungscodes durch JS und die Funktion zum automatischen Löschen des Eingabefelds bei der Eingabe von Fehlern vorgestellt. Interessierte Freunde können sich darauf beziehen

Dieser Artikel teilt Ihnen JS zur automatischen Generierung einer dynamischen HTML-Bestätigungscodeseite und die Funktion zum automatischen Löschen des Eingabefelds bei der Eingabe von Fehlern als Referenz. Der spezifische Inhalt lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
 <title>验证码</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>
 //产生验证码 
 window.onload = function() {
  createCode()
 }
 var code; //在全局定义验证码 
 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("ctl00_txtcode").value.toUpperCase(); //获取输入框内验证码并转化为大写  
 if(inputCode.length <= 0) { //若输入的验证码长度为0 
  alert("请输入验证码！"); //则弹出请输入验证码 
 } 
 else if(inputCode != code) { //若输入的验证码与产生的验证码不一致时 
  alert("验证码输入错误!"); //则弹出验证码输入错误 
  createCode(); //刷新验证码 
  document.getElementById("ctl00_txtcode").value = "";//清空文本框 
 } else { //输入正确时 
  alert("正在登陆"); //弹出 
  }
 }
</script>
</head>
<body>
 <p>
   <!--时间：2017-01-11 描述：输入框ct100_textcode -->
   <input type="text" id="ctl00_txtcode" />
   <!--时间：2017-01-11 描述：把验证码定义为按钮，点击刷新-->
   <input type="button" id="code" onclick="createCode()" />
   <!--时间：2017-01-11 描述：验证按钮 -->
   <input type="button" value="验证" onclick="validate()" />
  </p>
 </body
</html>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Lernen aller hilfreich sein wird, und ich hoffe, dass Sie Script House mehr unterstützen werden.

Das obige ist der detaillierte Inhalt vonJavaScript generiert automatisch dynamischen HTML-Verifizierungscode. 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 realisiert den Sharing-Effekt der ausgewählten Textaufforderung von Sina WeiboNächster Artikel：JavaScript realisiert den Sharing-Effekt der ausgewählten Textaufforderung von Sina Weibo

In Verbindung stehende Artikel

Mehr sehen