js+html制作簡單驗證碼

2019-11-19 17:33:30

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了JavaScript制作驗證碼的具體代碼，供大家參考，具體內容如下

<html><head><meta charset="utf-8"/><title>js驗證碼</title><style type="text/css"> #login{  width:50px;  height:30px;  line-height:30px;  margin:0 auto;  background-color:#eee;  text-align:center;  color:red; } p{  width:75px;  height:30px;  margin:0 auto; } </style></head><body><p>驗證碼：</p><div id="login" onclick="show()"><a href="#"></a></div><script type="text/javascript">  function codes(n){      var a="azxcvbnmsdfghjklqwertyuiopZXCVBNMASDFGHJKLQWERTYUIOP0123456789";      var b="";    for (var i = 0;i<n;i++){      var index=Math.floor(Math.random()*62);       b+=a.charAt(index);    }    return b;    };    function show(){      document.getElementById("login").innerHTML=codes(4);      }  window.onload=show;</script></body></html>

另一個js驗證碼的部分代碼：

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,'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 < codeLength; i++) {//循環操作  var index = Math.floor(Math.random()*36);//取得隨機數的索引（0~35）  code += random[index];//根據索引取得隨機數加到code上  }  checkCode.value = code;//把code值賦給驗證碼 } //校驗驗證碼 document.getElementById("Yzm").addEventListener("change",validate);  function validate(){  var inputCode = document.getElementById("Yzm").value.toUpperCase(); //取得輸入的驗證碼并轉化為大寫  if(inputCode.length <= 0) { //若輸入的驗證碼長度為0  alert("請輸入驗證碼！"); //則彈出請輸入驗證碼  $("#Yzm").focus();  YZM = false;  }  else if(inputCode != code ) { //若輸入的驗證碼與產生的驗證碼不一致時  alert("驗證碼輸入錯誤！@_@"); //則彈出驗證碼輸入錯誤  createCode();//刷新驗證碼  $("#Yzm").val("");<span style="font-family: Arial, Helvetica, sans-serif;">//清空文本框</span>  $("#Yzm").focus();//重新聚焦驗證碼框  YZM = false;  }  else { //輸入正確時  $("#Yzm").blur();//綁定驗證碼輸入正確時要做的事  YZM = true;   } };

附效果圖：