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>