2011-10-04 53 views
0

這裏是代碼,我找不到錯誤。背景圖像來自本地目錄,與jQuery庫相同。我測試了路徑,他們都很好。不知何故,某些東西不能工作,我找不到。由jQuery實時電子郵件驗證不起作用,我找不到bug

<html> 
    <head> 

     <script type="text/javascript" src="/myform/js/jquery.js"></script>  
     <script type="text/javascript"> 

      function isValidEmailAddress(emailAddress) { 
       var pattern = new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/); 
       return pattern.test(emailAddress); 
      } 

      $(document).ready(function() { 
         
       $("#validate").keyup(function(){ 
        var email = $("#validate").val(); 
          
        if(email != 0) 
        { 
         if(isValidEmailAddress(email)) 
         { 
            
          $("#validEmail").css({ "background-image": "url('/myform/logos/validyes.png')" }); 
           
         } else { 
            
          $("#validEmail").css({ "background-image": "url('/myform/logos/validno.png')" }); 
           
         } 
          
        } else { 
           
         $("#validEmail").css({ "background-image": "none" }); 
          
        } 
       }); 
      }); 

     </script> 
      <style> 
      #validEmail 
      { 
       margin-top: 4px; 
       margin-left: 9px; 
       position: absolute; 
       width: 16px; 
       height: 16px; 
      } 
     </style> 
    </head> 
    <body> 


     <div><input type=」email」 id=」validate」 width=」50」><span id=」validEmail」></span></div> 
    </body> 
</html> 
+1

初次檢查似乎是正確的。可以去老派,並在每個條件內使用alert()或console.log()來查看是否滿足條件。我錯過了電子郵件如何成爲「0」,所以這種情況可能總是得到滿足。除此之外,我注意到你的HTML底部(div內)有錯誤的雙引號。可能像那樣愚蠢。 –

+0

你可以告訴我的電子郵件地址的樣本,您驗證 – diEcho

+0

是否檢查了您的瀏覽器的錯誤控制檯是否有任何javascript錯誤 – Neelam

回答

1

嘗試用

if(email.length != 0) 
+0

不幸的是,它沒有解決問題。我在過去固定了這段代碼,現在我找不到它了,現在我找不到這個bug :( – user843681

1

變化更換

if(email != 0) 

<div><input type=」email」 id=」validate」 width=」50」><span id=」validEmail」></span></div> 

至:

<div><input type="email" id="validate" width="50"><span id="validEmail"></span></div> 

我測試過了,沒關係。

+1

有什麼區別? – user843681

+0

引號「to」 – voigtan

0

我使ur代碼working.Basically ur輸入標記不正確。 您輸入的標籤是

<input type=」email」 id=」validate」 width=」50」><span id=」validEmail」></span> 

我改成了這個

<input type="email" id="validate" width="50" /><span id="validEmail" ></span> 

這裏是工作的代碼。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

    <script type="text/javascript" src="JS/jquery-1.3.2.min.js"></script> 
    <script type="text/javascript"> 

     function isValidEmailAddress(emailAddress) { 
      var pattern = new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/); 

      return pattern.test(emailAddress); 
     } 

     $(document).ready(function() { 

      $("#validate").keyup(function(){ 
       var email = $("#validate").val(); 

       if(email != 0) 
       { 
        if(isValidEmailAddress(email)) 
        { 
         alert('Valid Email'); 
         // $("#validEmail").css({ "background-image": "url('/myform/logos/validyes.png')" }); 

        } else { 

         alert('InValid Email'); 
         // $("#validEmail").css({ "background-image": "url('/myform/logos/validno.png')" }); 

        } 

       } else { 

        $("#validEmail").css({ "background-image": "none" }); 

       } 
      }); 
     }); 

    </script> 
     <style> 
     #validEmail 
     { 
      margin-top: 4px; 
      margin-left: 9px; 
      position: absolute; 
      width: 16px; 
      height: 16px; 
     } 
    </style> 
</head> 
<body> 


    <div><input type="email" id="validate" width="50"><span id="validEmail" /></span></div> 
</body> 
</html> 

and one moe thing.dont檢查電子郵件驗證keyup event.Guess檢查模糊事件會更合適。

0

將高級引號改爲真實引號,將您的條件添加到email.length > 0,然後您不妨縮短代碼。太多的東西重複。

function isValidEmailAddress(emailAddress) { 
    return /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/.test(emailAddress); 
} 

$(function() { 
    $("#validate").keyup(function() { 
    var bg = "none"; 
    var email = $("#validate").val(); 
    if(email.length > 0) { 
     bg = isValidEmailAddress(email) 
      ? "url('/myform/logos/validyes.png')" 
      : "url('/myform/logos/validno.png')"; 
    } 
    $("#validEmail").css("background-image", bg); 
    }); 
});