验证码生成（点击就更换）

Css（在验证码框背景设置成模糊底色照片-code.jpg）:

 1      .code   
 2         {   
 3             background-image:url(code.jpg);   
 4             font-family:Arial;   
 5             font-style:italic;   
 6             color:Red;   
 7             border:0;   
 8             padding:2px 3px;   
 9             letter-spacing:3px;   
10             font-weight:bolder;   
11         }   
12         .unchanged   
13         {   
14             border:1;   
15         }

javascript(生成随机字母):

 1 var code ; //在全局 定义验证码   
 2 var True="rsfdsafasdfsdfdasfasdf";
 3 function Check()
 4 {
 5     var checkCode = document.getElementById("checkCode").value;
 6     var codeCheck = document.getElementById("codeCheck").value;
 7       if(codeCheck !=checkCode)
 8         {
 9             alert("验证码输入不正确！")
10         }    
11 }
12 function createCode()   
13 {    
14   code = "";   
15   var codeLength = 6;//验证码的长度   
16   var checkCode = document.getElementById("checkCode");   
17   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','O','P','Q','R','S','T','U','V','W','X','Y','Z');//所有候选组成验证码的字符，当然也可以用中文的   
18       
19   for(var i=0;i<codeLength;i++)   
20   {   
21     
22       
23   var charIndex = Math.floor(Math.random()*36);   
24   code +=selectChar[charIndex];   
25      
26      
27   }   
28 //  alert(code);  
29 
30   if(checkCode)   
31   {   
32     checkCode.className="code";   
33     checkCode.value = code;   
34   }   
35 
36 }

html（form表单）

1     <form action="#" method="post" onsubmit="return Check()">
2                     <label class="col-md-3 control-label" for="checkCode">验证码</label>
3                         <input type="text" name="codeCheck" class="form-control"
4                             id="codeCheck" placeholder="请点击右侧方框获取验证码">
5                         <input type="text" onclick="createCode()" readOnly="true" id="checkCode" class="unchanged" style=" 80px"  /><br>
6             <input type="submit" value="提交">
7             </form>

Code.jpg:

完整代码：

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <style type="text/css">  
 7         .code   
 8         {   
 9             background-image:url(code.jpg);   
10             font-family:Arial;   
11             font-style:italic;   
12             color:Red;   
13             border:0;   
14             padding:2px 3px;   
15             letter-spacing:3px;   
16             font-weight:bolder;   
17         }   
18         .unchanged   
19         {   
20             border:1;   
21         }   
22     </style>
23 <script type="text/javascript">
24 var code ; //在全局 定义验证码   
25 var True="rsfdsafasdfsdfdasfasdf";
26 function Check()
27 {
28     var checkCode = document.getElementById("checkCode").value;
29     var codeCheck = document.getElementById("codeCheck").value;
30       if(codeCheck !=checkCode)
31         {
32             alert("验证码输入不正确！")
33         }    
34 }
35 function createCode()   
36 {    
37   code = "";   
38   var codeLength = 6;//验证码的长度   
39   var checkCode = document.getElementById("checkCode");   
40   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','O','P','Q','R','S','T','U','V','W','X','Y','Z');//所有候选组成验证码的字符，当然也可以用中文的   
41       
42   for(var i=0;i<codeLength;i++)   
43   {   
44     
45       
46   var charIndex = Math.floor(Math.random()*36);   
47   code +=selectChar[charIndex];   
48      
49      
50   }   
51 //  alert(code);  
52 
53   if(checkCode)   
54   {   
55     checkCode.className="code";   
56     checkCode.value = code;   
57   }   
58 
59 }
60 </script>
61 <style>
62 ul.b {list-style-type:square;}
63 </style>
64 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
65 <title>Insert title here</title>
66 </head>
67 <body>
68             <form action="#" method="post" onsubmit="return Check()">
69                     <label class="col-md-3 control-label" for="checkCode">验证码</label>
70                         <input type="text" name="codeCheck" class="form-control"
71                             id="codeCheck" placeholder="请点击右侧方框获取验证码">
72                         <input type="text" onclick="createCode()" readOnly="true" id="checkCode" class="unchanged" style=" 80px"  /><br>
73             <input type="submit" value="提交">
74             </form>
75 </body>
76 </html>

生成验证码