javascript实现数字+字母验证码的简单实例

  实例如下:

  

复制代码 代码如下:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

  <title>js验证码</title>

  <style type="text/css">

  .code

  {

  background-image:url(code.jpg);

  font-family:Arial;

  font-style:italic;

  color:Red;

  border:0;

  padding:2px 3px;

  letter-spacing:3px;

  font-weight:bolder;

  }

  .unchanged

  {

  border:0;

  }

  </style>

  <script language="javascript" type="text/javascript">

  var code ; //在全局 定义验证码

  function createCode()

  {

  code = "";

  var codeLength = 4;//验证码的长度

  var checkCode = document.getElementById("checkCode");

  var selectChar = 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','wW','x','y','z');//所有候选组成验证码的字符,当然也可以用中文的

  for(var i=0;i<codeLength;i++)

  {

  var charIndex = Math.floor(Math.random()*36);

  code +=selectChar[charIndex];

  }

  //       alert(code);

  if(checkCode)

  {

  checkCode.className="code";

  checkCode.value = code;

  }

  }

  function validate ()

  {

  var inputCode = document.getElementById("input1").value;

  if(inputCode.length <=0)

  {

  alert("请输入验证码!");

  }

  else if(inputCode != code )

  {

  alert("验证码输入错误!");

  createCode();//刷新验证码

  }

  else

  {

  alert("OK");

  }

  }

  </script>

  </head>

  <body onload="createCode()">

  <form  action="#">

  <input  type="text"   id="input1" />

  <input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="unchanged" style="width: 80px"  /><br />

  <input id="Button1"  onclick="validate();" type="button" value="确定" />

  </form>

  </body>

  </html>