JS实现的一个验证码，可以在前端验证后在提交action

浏览数：71 / 时间：2015年06月09日

js实现的一个验证码功能，可以在前端判断验证码输入是否正确

输入的邮箱格式是否正确

验证成功后才提交action到后台

  1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml" >
  3 <head>
  4     <title>无标题页</title>
  5     <style type="text/css">
  6         .code
  7         {
  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:0;
 21         }
 22     </style>
 23     <script language="javascript" type="text/javascript">
 24     
 25      var code ; //在全局 定义验证码
 26      function createCode()
 27      { 
 28        code = "";
 29        var codeLength = 6;//验证码的长度
 30        var checkCode = document.getElementById("checkCode");
 31        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‘);//所有候选组成验证码的字符，当然也可以用中文的
 32         
 33        for(var i=0;i<codeLength;i++)
 34        {
 35       
 36         
 37        var charIndex = Math.floor(Math.random()*36);
 38        code +=selectChar[charIndex];
 39        
 40        
 41        }
 42 //       alert(code);
 43        if(checkCode)
 44        {
 45          checkCode.className="code";
 46          checkCode.value = code;
 47        }
 48        
 49      }
 50      
 51       function validate ()
 52      {
 53        var inputCode = document.getElementById("input1").value;
 54        if(inputCode.length <=0)
 55        {
 56            document.getElementById("yzm").innerText="请输入验证码！";
 57            return false;
 58 
 59        }
 60        else if(inputCode != code )
 61        {
 62         document.getElementById("yzm").innerText="验证码输入错误！";
 63           //alert("验证码输入错误！");
 64           createCode();//刷新验证码
 65           return false;
 66        }
 67        else
 68        {
 69           var inputCode = document.getElementById("email").value;
 70           if(inputCode.length <=0)
 71           {
 72             document.getElementById("yzm").innerText="请输入您的邮箱，方便我们联系您！";
 73            return false;
 74           }else{
 75  
 76         //提交action
 77           var f = document.forms[0];
 78          f.action="";
 79          f.submit(); 
 80          }
 81        }
 82        
 83        }
 84        <!-- 可以控制验证是否是邮箱格式
 85          function emailCheck() {
 86          var objName = document.getElementById("email");
 87          var pattern = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
 88          if (!pattern.test(objName.value)) {
 89               document.getElementById("yzm").innerText="请输入正确的邮箱地址！";
 90                objName.focus();
 91               document.getElementById("email").innerText="";    
 92               return false;
 93             }
 94          document.getElementById("yzm").innerText="";
 95          return true;
 96      }
 97     -->   
 98     </script>
 99 </head>
100 <body onload="createCode()">
101 <form  action="#">
102     &nbsp;<input  type="text"   id="input1" placeholder="此项必填哦"/>
103     <input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="unchanged" style="width: 80px"  /><br />
104     <input id="Button1"  onclick="validate();" type="button" value="确定" />&nbsp;
105     <label id="yzm" style="color:red;margin-left:15em"></label>
106 </form>
107 </body>
108 </html>