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/