點開這個頁面首先恭喜你！——可以學到一個非常簡單的在用戶登陸注冊的時候用前端實現的驗證碼驗證的功能.
我的項目框架為SSM框架，用戶的登陸注冊以及用戶信息的增刪改查等等其他的功能時通過java后端技術實現的，對於驗證碼功能只需要在login.html添加部分代碼即可實現。
網上的我也搜過查看了好多，但是都是非常繁瑣，有前后端分離的、接口調用的、添加工具類的，無論是什么方法他們都有一個共同的特點——代碼冗長繁瑣，其次就是和自己所要用的方法出入太大，借鑒起來很麻煩，看了半天用處不是多大，所以在此我總結了下，給大家展示一個簡單的方法去實現驗證碼驗證的功能，希望對大家有所幫助！
話不多說，上代碼！
沒錯,就這么的簡單.在scripts生成驗證碼設為全局變量顯示在一個input標簽上,首先不考慮登錄信息是否有誤,只有驗證碼通過的情況下才會進行表單的提交,在判斷登錄信息的正確與否.
代碼如下，需要的直接拷貝
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>login</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="/myfirstssm/js/jquery-1.11.3.min.js"></script> <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 timeDiv = document.getElementById("time"); window.setInterval(function(){ timeDiv.innerHTML = new Date().toLocaleString(); }, 1000); }; 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值賦給驗證碼 } function check(){ var inputCode = document.getElementById("ctl00_txtcode").value.toUpperCase(); var username = $("#username").val(); var password = $("#password").val(); if(username=="" || password==""||inputCode==""){ alert("輸入信息不能為空,請完善信息！"); return false; }else if(inputCode!=code){ alert("驗證碼輸入錯誤,請重新輸入！"); createCode(); //刷新驗證碼 document.getElementById("ctl00_txtcode").value = ""; //清空文本框 return false; } return true; } </script> </head> <body> <br/><br/><br/><br/><br/> <div id="wrap"> <div id="top_centent" > <div id="header"> <!-- style="color:DodgerBlue;" --> <div id="leftheader" ></div> <div id="topheader" > <h1 id="title" style="text-align:center;" > <a href="#" style="text-decoration: none;color:black">管理員</a> </h1> </div> <div id="navigation"></div> <CENTER> <font color="red"> <!-- <span id="message">${@}</span> --> </font> </CENTER> </div> <div id="content"> <form action="/myfirstssm/jsp/login.action" method="post" onsubmit="return check()"> <table cellpadding="0" cellspacing="20" border="0" class="form_table" align="center"> <tr> <td valign="middle" align="right"> 用 戶 名: </td> <td valign="middle" align="left"> <input type="text" name="username" id="username" /> </td> </tr> <tr> <td valign="middle" align="right"> 密 碼: </td> <td valign="middle" align="left"> <input type="password" name="password" id="password" /> </td> </tr> <tr> <td valign="middle" align="right"> 驗 證 碼: </td> <td valign="middle" align="left"> <input type="text" id="ctl00_txtcode" /> </td> <td valign="middle"> <input type="button" id="code" onclick="changeImg()"/> </td> </table> <p style="text-align:center"> <input type="submit" class="button" value="登陸" /> <input type="button" class="button" value="注冊" onclick="location='/myfirstssm/jsp/register.html'" /> <input type="reset" name="reset" value="重置"/> </p> </form> </div> </div> <form action="/myfirstssm/jsp/finduser.action" method="post" > <P style="text-align:center;"><input type="submit" class="button" value="用戶信息" /></P> </form> <div> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/> <div style="text-align:left">Copyright © 2019 雨如煙</div> <div id="time" style="text-align:right"></div> </div> </div> </body> </html>