点开这个页面首先恭喜你！——可以学到一个非常简单的在用户登陆注册的时候用前端实现的验证码验证的功能.
我的项目框架为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" οnsubmit="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" οnclick="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>