JS實現的一個驗證碼，可以在前端驗證後在提交action

林六天發表於2015-01-23
JS前端

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>

 

相關文章