проверка входных данных javascript не работает с первой попытки

Question

Ниже приведен сценарий в форме ввода HTML. Моя проблема в том, что когда я впервые ввожу что-то в поле ввода, я получаю неправильный результат, но когда я снова фокусируюсь на поле (щелкните в поле ввода), а затем отмените выбор окна ввода, я получаю правильный ответ! почему это происходит ??? Каково решение?

<input type="email" id="iemail" name="email" class="form-control"></input> 
<script> 
    var pattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i; 
    var userinput; 
    $("#iemail").focus(function(){ 
     userinput = $("#iemail").val(); 
    }); 
    $("#iemail").blur(function(){ 
     if(pattern.test(userinput)){ 
      alert("VALID"); 
     }else{ 
      alert("not a valid e-mail address"); 
     } 
    }); 
</script> 

Может кто-нибудь, пожалуйста, помогите мне. Я действительно ценю это ...

Answer 1

Это потому, что вы присваиваете значение для userInputfocus на события поля , который в первый раз запускается focus, когда поле пустое, будет означать, что userInput устанавливается в пустое значение.

Вы можете переместить назначение userInput на событие blur.

var pattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i; 
$("#iemail").blur(function(){ 
    var userinput = $("#iemail").val(); 

    if(pattern.test(userinput)){ 
     alert("VALID"); 
    }else{ 
     alert("not a valid e-mail address"); 
    } 
}); 

Answer 2

Удалить это:

$("#iemail").focus(function(){ 
     userinput = $("#iemail").val(); 
    }); 

изменение размывания:

$("#iemail").blur(function(){ 
     userinput = $("#iemail").val(); 
     if(pattern.test(userinput)){ 
      alert("VALID"); 
     }else{ 
      alert("not a valid e-mail address"); 
     } 
    }); 

Answer 3

Причина в том, что вы во всем мире хранения значения #iemail на фокус. first время, когда оно фокусируется, оно глобально хранит пустую строку, так как вы еще ничего не вводили. Когда вы размываете, он проверяет эту пустую глобальную строку. Во второй раз, когда вы фокусируетесь, теперь он имеет значение в текстовом поле и сохраняет это.

Не нужно делать эти вещи отдельно.

$("#iemail").blur(function(){ 
    var userinput = $("#iemail").val(); 
    if(pattern.test(userinput)){ 
     alert("VALID"); 
    }else{ 
     alert("not a valid e-mail address"); 
    } 
});