文档章节

js生成验证码

m243043962
 m243043962
发布于 2017/08/22 20:13
字数 572
阅读 4
收藏 0

<%@ 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"/>

<script>
     function msgblur(id1,id2,msg){
         var name= document.getElementById(id1);
         if(name.value==""){
             document.getElementById(id2).innerHTML=msg;
        
             return false;
        }
         return true;
    };
    
    function namefocus(id){
             document.getElementById(id).innerHTML="";                 
    };
    function check(){
          if(msgblur('name','np','输入姓名')&&msgblur('pwd','pp','输入密码')){
              return true; 
        }  
        return false;            
    };
    
  </script>
  
<script type="text/javascript">
var code;
function createCode() {
        //在全局定义验证码  
         code = "";
         //验证码的长度
         var codeLength = 4; 
         
         //所有候选组成验证码的字符,当然也可以用中文的===随机数
         var codeChars = 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 charNum = Math.floor(Math.random() * 36);//取得随机数的索引(0~35)
              code += codeChars[charNum];//根据索引取得随机数加到code上
         }
         var checkCode = document.getElementById("checkCode");
         if(checkCode) 
         {
              checkCode.value = code;//把code值赋给验证码  
              //checkCode.innerHTML = code;//把code值赋给验证码  
         } 
}

//校验验证码  
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 onload="createCode()">
  
   <div class="container">
      <h2 align="center">登录页面</h2>
      <form action="check.jsp"  onsubmit="return check()">
          <table class="table table-bordered table-hover" height="180px">
             <tr>
               <td>姓名:</td>
               <td>
                <input type="text" id="name" name="name" onblur="msgblur('name','np','输入姓名')" onfocus="namefocus('np')"/>
                <span id="np" style="color:#900"></span>
               </td>
             </tr>
                
             <tr>
               <td>密码:</td>
               <td>
                  <input type="password" id="pwd" name="pwd" onblur="msgblur('pwd','pp','输入密码')" onfocus="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" onclick="createCode()"/></div>
                        <div><a href="#" onclick="createCode()">看不清换一张</a> </div>
                      
                      </div>
                   </div>
                  
               </td>
             </tr>
             
             
             <tr align="center">
                <td colspan="2">
                   <div align="center">
                      <input type="submit" value="提交" class="btn btn-info">
                       &nbsp;  &nbsp;  &nbsp;
                      <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;
}

{
 text-decoration:none;
 font-size:12px;
 color:#288bc4;
}
a:hover 
{
 text-decoration:underline;
}
 

样式表2bootstrap.css 

自己下载

 

 

© 著作权归作者所有

m243043962
粉丝 0
博文 70
码字总数 34357
作品 0
黄冈
程序员
私信 提问

暂无文章

ContentProvider和数据库的区别

大家好,今天我们来讲解ContentProvider和数据库的区别是他们之间的联系. 四大组件之一 1.ContentProvider是如何实现数据共享的? 1.在Android中,为了把自己程序的数据(一般是数据库)提供给其他...

天王盖地虎626
6分钟前
0
0
前端搜索

思路:使用indexOf或正则表达式

单线程生物
13分钟前
0
0
Navicat Premium 12破解激活

本文转载自:https://www.cnblogs.com/joyny/p/9536006.html 下载Navicat Premium 12并安装; 链接:https://pan.baidu.com/s/1mN-urlh--SX1vbq7hi81Ww 密码:menk 重要提示:该注册机来源于...

Ygam
15分钟前
0
0
ThreadGroup 线程组

在看tomcat源码时,TaskThreadFactory这个线程工厂类中用到ThreadGroup这个类,之前没有用到过,所以就特地查了一下 ThreadGroup这个属于java元老级的类,在java1.0版本中就出现了,里面还有...

二两豆腐
16分钟前
0
0
在 CentOS 或 RHEL 系统上检查可用的安全更新的方法

当你更新系统时,根据你所在公司的安全策略,有时候可能只需要打上与安全相关的补丁。大多数情况下,这应该是出于程序兼容性方面的考量。那该怎样实践呢?有没有办法让 yum 只安装安全补丁呢...

xiangyunyan
40分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部