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;   } };

附效果图：