html javascript email image

Question

下面是我的驗證腳本。爲什麼在輸入電子郵件時不顯示微型紅色X圖像，但不正確？我卡住了......請幫忙！

<form name="validation" onSubmit="return checkbae()"> 
    <input type="text" size=18 onkeyup="return checkbae()" name="email"> 
    <span id="email" class="email"></span> 
    <input type="submit" value="Submit"> 
</form> 
<script language="JavaScript1.2"> 
    function checkemail() { 
     var messageg = document.getElementById('email'); 
     var str = document.validation.email.value 
     var filter = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]  {2})?)$/i 
     if (filter.test(str)) 
      testresults = true 
     else { 
      messageg.style.color = red; 
      messageg.innerHTML = "\u2718" 
      testresults = false 
     } 
     return (testresults) 
    } 
    function checkbae() { 
     if (document.layers || document.getElementById || document.all) 
      return checkemail() 
     else 
      return true 
    } 
</script> 

Answer 1

不知道這是否可以幫助你，但這是我想出的。

<form name="validation" onSubmit="return checkbae();" method="post" > 
    <input type="text" size="18" name="email" /> 
    <span id="email" class="email"></span> 
    <input type="submit" value="Submit"/> 
</form> 



function checkemail() { 
    var str = document.validation.email.value; 
    var filter = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i; 
    var testresults; 
    if (filter.test(str)) 
     testresults = true; 
    else { 
     $(".email").text("\u2718").css("color", "red"); 
     testresults = false; 
    } 
    return (testresults); 
} 
function checkbae() { 
    if (document.layers || document.getElementById || document.all) 
     return window.checkemail(); 
    else 
     return true; 
} 

Answer 2

您需要學習如何使用JavaScript調試器，如Firebug。

首先，你錯過了很多分號和括號。我知道他們一些是可選的，但不使用它們將幾乎肯定導致頭痛後來在路上，當你添加另一行代碼，等等。然而，這將是一個問題：

var str = document.validation.email.value // <-- Semi-colon?? 
var filter = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i 

之後，立即運行您的代碼標記了一個錯誤red is not defined。您正在使用裸字red而不是字符串"red"。

修復，使其工作。

function checkemail() { 
    var messageg = document.getElementById('email'); 
    var str = document.validation.email.value; 
    var filter = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]  {2})?)$/i; 
    if (filter.test(str)) { 
     testresults = true; 
    } else { 
     messageg.style.color = "red"; 
     messageg.innerHTML = "\u2718"; 
     testresults = false; 
    } 
    return testresults; 
} 

function checkbae() { 
    if (document.layers || document.getElementById || document.all) { 
     return checkemail(); 
    } else { 
     return true; 
    } 
} 

演示：http://jsfiddle.net/hFjPm/

注意，我只注意到你永遠清除X當電子郵件是正確的，所以你基本上是總是有X。您需要確保在過濾器的if區塊中將其刪除。使用一點CSS，你可以簡化你的代碼，只需隱藏和顯示X，而不是每次重新創建html。

演示：http://jsfiddle.net/txNTh/