JS随机生成生成验证码

最新推荐文章于 2021-05-01 11:21:27 发布

再见是梦

最新推荐文章于 2021-05-01 11:21:27 发布

阅读量816

点赞数

CC 4.0 BY-SA版权

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/u013046341/article/details/50132359

JS 专栏收录该内容

0 篇文章

订阅专栏

这篇博客演示了如何使用JavaScript创建一个随机生成的四位验证码，并实现了验证码的验证功能。通过点击验证码图片或按钮，可以刷新验证码。登录表单中包含了账号、密码和验证码输入字段，表单提交前会进行验证，确保输入的验证码正确。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<link href="${pageContext.request.contextPath}/css/login.css" type="text/css" rel="stylesheet" />
<script src="${pageContext.request.contextPath}/js/jquery.js" type="text/javascript"></script>
<%-- <script src="${pageContext.request.contextPath}/js/imgyzm.js" type="text/javascript"></script> --%>

<title>测试</title>
</head>
<body>


<script type="text/javascript">
$(function(){
createCode();
});
var code ; //在全局定义验证码
function createCode()
{
code = "";
var codeLength = 4;//验证码的长度
var checkCode =document.getElementById("checkCode");
//alert(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','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','j','k','m','n','p','q','r','s','t','v','w','x','y','z');
for(var i=0;i<codeLength;i++)
{

var charIndex = Math.floor(Math.random()*57); //57是数组selectChar的长度
code +=selectChar[charIndex];

}
if(checkCode)
{
checkCode.className="code";
checkCode.innerHTML=code;
//checkCode.value = code;
}

}

function validate (){
var inputCode = $("#imgyzm").val();
if(inputCode.length <=0)
{
   $("#code").text("请输入验证码！");
   $("#imgyzm").focus();
   return false;
}
  //忽略大小写
   if(inputCode.toLowerCase().indexOf(code.toLowerCase())||inputCode.length>4||inputCode.length<4){
   $("#code").text("验证码输入错误！");
   $("#imgyzm").val("");
   $("#imgyzm").focus();
   createCode();//刷新验证码
   return false;
}
//return true;
}

</script>

<div class="login_container">
<form id="jvForm" action="${pageContext.request.contextPath}/loginController/loginuser" onsubmit="return validate()" method="post">
<article>
<dl>
<dt>账号：</dt>
<dd><input required="required" id="account" name="account" type="text" placeholder="请输入账号" /></dd>
<span id="msg1">${amsg}</span>
</dl>

<dl>
<dt>密码：</dt>
<dd><input required="required" type="password" id="password" name="password" /></dd>
<span>${pmsg}</span>
</dl>

<dl>
<dt>验证码：</dt>
<dd class="login_yzm"><input type="text" id="imgyzm"></dd>

<span style="color:#2b4f3c;"><code onclick="createCode();" id="checkCode"></code><a onclick="createCode();">  看不清，换一张</a></span>
<div id="code" style="margin-left: 70px;float: left;width: 400px;padding-top: 10px;color:#333;"></div>
</dl>

<input type="submit" id="sub" value="登录" class="sub" />
</article>
</form>
</div>
</body>
</html>