проверка электронной почты с помощью javascript

Question

Я узнаю про простую проверку формы javascript, и мне просто интересно, почему моя проверка электронной почты не работает. Я пытаюсь захватить информацию из поля ввода электронной почты и запустить мою функцию с помощью RegEx. Любая помощь будет оценена по достоинству.

скрипку демо: http://jsfiddle.net/6SWj4/

(function(){ 


     var emailAddr = document.getElementById("f_email").value; 
     console.log(emailAddr); 

    // console.log(email.test(str)); 
    // 
    // if(email.test(str) == true){ 
    //  console.log("true"); 
    // }else{ 
    //  console.log("false"); 
    // } 

     myform.onsubmit = function(e){ 

      //Below is one example of the validateField call with an argument. 
      //You must dynamically retrieve the ID name from the DOM/HTML. 

      validateField(emailAddr); //id = is the form input field ID 


      e.preventDefault(); 
      return false; 
     }; 


     var validateField = function(inputName){ 

      if (inputName.name === 'f_email'){ 
       var pattern = /^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; 
       var emailVal = new RegExp(pattern); 
       //You will need to create an else-if statement for each input field id. The 
       //  format will be similar to the above IF statement. 


      }else{ 
       console.log("not valide"); 
      } 

      var pass = emailVal.test(inputName); 
      console.log(pass); 

      var errorMsg = inputName.nextSibling.nextSibling.nextSibling.nextSibling; 

      if (!pass || inputName.value.length < 2){ 
       errorMsg.style.display='block'; 
       inputName.style.backgroundColor = 'red'; 
      } else if (pass && inputName.value.length > 5){ 
       errorMsg.style.display='none'; 
       inputName.style.backgroundColor = 'green'; 
      } else { 
       errorMsg.style.display='none'; 
       inputName.style.backgroundColor = 'white'; 
      }; 
     }; 

    })(); // end wrapper 

Answer 1

Ваша проблема связана с получением значения на входе при загрузке страницы, а не после того, как пользователь ввел что-нибудь. Попытка:

myform.onsubmit = function(e){ 

     /* get value withing submit handler*/ 

     var emailAddr = document.getElementById("f_email").value; 
     console.log(emailAddr); 

     //Below is one example of the validateField call with an argument. 
     //You must dynamically retrieve the ID name from the DOM/HTML. 

     validateField(emailAddr); //id = is the form input field ID 


     e.preventDefault(); 
     return false; 
    }; 

Искоренение ошибок в validateField(). Аргумент ожидается inpuname, но вы передаете входное значение электронной почты

Answer 2

У вас есть много ошибок в коде. Сначала, что я сказал вам в комментариях, вы должны сделать document.getElementById("f_email").value; внутри функции onsubmit. Вы также объявляете переменные внутри чего-то и используете его из него, например emailVal, который вы объявляете внутри if. Это не сработает, вы должны объявить его до if. проверьте с помощью javascript консоли эти небольшие ошибки.