No Comments

一个用js生成验证码的例子


嗯，今天展示一个简单的js生成验证码的例子吧，挺方便的，


html 如下：


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <style type="text/css">
  6. .code {
  7. background: url(code_bg.jpg);
  8. font-family: Arial;
  9. font-style: italic;
  10. color: blue;
  11. font-size: 30px;
  12. border: 0;
  13. padding: 2px 3px;
  14. letter-spacing: 3px;
  15. font-weight: bolder;
  16. float: left;
  17. cursor: pointer;
  18. width: 150px;
  19. height: 60px;
  20. line-height: 60px;
  21. text-align: center;
  22. vertical-align: middle;
  23. }

  25. a {
  26. text-decoration: none;
  27. font-size: 12px;
  28. color: #288bc4;
  29. }

  31. a:hover {
  32. text-decoration: underline;
  33. }
  34. </style>
  35. <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  36. <script type="text/javascript">
  37. var code;
  38. function createCode() {
  39. code = "";
  40. var codeLength = 6; //验证码的长度
  41. var checkCode = document.getElementById("checkCode");
  42. var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c',
  43. 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o',
  44. 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A',
  45. 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M',
  46. 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //所有候选组成验证码的字符，当然也可以用中文的
  47. for (var i = 0; i < codeLength; i++) {
  48. var charNum = Math.floor(Math.random() * 52);
  49. code += codeChars[charNum];
  50. }
  51. if (checkCode) {
  52. checkCode.className = "code";
  53. checkCode.innerHTML = code;
  54. }
  55. }

  57. function validateCode() {

  59. var inputCode = document.getElementById("inputCode").value;
  60. if (inputCode.length <= 0) {
  61. alert("请输入验证码！");
  62. } else if (inputCode.toUpperCase() != code.toUpperCase()) {
  63. alert("验证码输入有误！");
  64. createCode();
  65. } else {
  66. alert("验证码正确！");
  67. }
  68. }
  69. </script>
  70. </head>
  71. <body onload="createCode()">
  72. <form id="form1" runat="server" onsubmit="validateCode()">
  73. <div>
  74. <table border="0" cellspacing="5" cellpadding="5">
  75. <tr>
  76. <td></td>
  77. <td>
  78. <div class="code" id="checkCode" onclick="createCode()"></div>
  79. </td>
  80. <td><a href="#" onclick="createCode()">看不清换一张</a></td>
  81. </tr>
  82. <tr>
  83. <td>验证码：</td>
  84. <td><input style="float:left;" type="text" id="inputCode" /></td>
  85. <td>请输入验证码</td>
  86. </tr>
  87. <tr>
  88. <td></td>
  89. <td><input id="Button1" onclick="validateCode()" type="button"
  90. value="确定" /></td>
  91. <td></td>
  92. </tr>
  93. </table>
  94. </div>
  95. </form>
  96. </body>
  97. </html>

最后更新于 2021-09-27 17:57:38 并被添加「 js, 验证码」标签，已有 21437 位童鞋阅读过。

本站使用「署名 4.0 国际」创作共享协议，可自由转载、引用，但需署名作者且注明文章出处

评论已关闭