js生成验证码

最新推荐文章于 2022-12-07 11:32:10 发布

chengzhiji7379

最新推荐文章于 2022-12-07 11:32:10 发布

阅读量97

点赞数

文章标签： java javascript ViewUI

原文链接：https://my.oschina.net/m243043962/blog/1518886

版权

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>登录页面</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/yanzhen.css"/>

//校验验证码
function validateCode() {
   //获取输入的验证码
         var inputCode=document.getElementById("inputCode").value;

         if(inputCode.length <= 0) {
            alert("请输入验证码！");
         }else if(inputCode.toUpperCase() != code.toUpperCase()){
           alert("验证码输入有误！");
           createCode();
         }else {
          alert("验证码正确！");
         }
}
</script>

</head>

<body οnlοad="createCode()">

<div class="container">
<h2 align="center">登录页面</h2>
<form action="check.jsp" οnsubmit="return check()">
<table class="table table-bordered table-hover" height="180px">
<tr>
<td>姓名：</td>
<td>
<input type="text" id="name" name="name" οnblur="msgblur('name','np','输入姓名')" οnfοcus="namefocus('np')"/>
<span id="np" style="color:#900"></span>
</td>
</tr>

<tr>
<td>密码：</td>
<td>
<input type="password" id="pwd" name="pwd" οnblur="msgblur('pwd','pp','输入密码')" οnfοcus="namefocus('pp')"/>
<span id="pp" style="color:#900"></span>
</td>
</tr>

<tr>
<td>验证码：</td>
<td>
<div>
<div class="m1"><input type="text" id="inputCode" name="inputCode"/></div>
<div class="m2">
<div><input class="code" id="checkCode" name="checkCode" οnclick="createCode()"/></div>
<div><a href="#" οnclick="createCode()">看不清换一张</a> </div>

</div>
</div>

</td>
</tr>

<tr align="center">
               <td colspan="2">
<div align="center">
<input type="submit" value="提交" class="btn btn-info">
     
<input type="reset" value="重置" class="btn btn-danger">
</div>

               </td>
           </tr>
</table>

</form>
</div>

</body>
</html>

样式表1

yanzhen.css

.m1{
   width:25%;

float:left;

}
.m2{
   width:70%;

float:right;
}

.code
{
background:url(code_bg.jpg);
font-family:Arial;
font-style:italic;
color:blue;
font-size:30px;
border:0;
padding:2px 3px;
letter-spacing:3px;
font-weight:bolder;
float:left;
cursor:pointer;
width:150px;
height:60px;
line-height:60px;
text-align:center;
vertical-align:middle;
}
a
{
text-decoration:none;
font-size:12px;
color:#288bc4;
}
a:hover
{
text-decoration:underline;
}