전자 메일 주소 유효성 검사

Question

저는 애니메이션 체크 마크, 애니메이션 보내기 버튼, mouseenter/mouseleave animated fields 등과 같은 간단하면서도 멋진 애니메이션으로 연락처 양식을 처음부터 작성합니다. 한편 유효성 검사 코드를 작성하고 있습니다. 이메일 필드에 약간의 어려움이 있습니다. 나는 다른 게시물을 확인하고 유용한 정보를 검색하고 있지만 내 맥락은 약간 특이하다. 어떻게 흐림 기능에 checkValidEmailAddress 상황화 않습니다 : - 질문 보시다시피, 나는 필드가 비어 있지 않은 경우 특별히 확인, 흐림()에 대한 검증을하고있어

// Check if the email address is valid 
function checkValidEmailAddress(emailAddress) { 
    var pattern = new RegExp(/^(("[\w-+\s]+")|([\w-+]+(?:\.[\w-+]+)*)|("[\w-+\s]+")([\w-+]+(?:\.[\w-+]+)*))(@((?:[\w-+]+\.)*\w[\w-+]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][\d]\.|1[\d]{2}\.|[\d]{1,2}\.))((25[0-5]|2[0-4][\d]|1[\d]{2}|[\d]{1,2})\.){2}(25[0-5]|2[0-4][\d]|1[\d]{2}|[\d]{1,2})\]?$)/i); 
    return pattern.test(emailAddress); 
}; 

// Email field validation 
$('#userEmail').blur(function(){ 
    $(this).animate({'background-color':'#ffffff'}, 200); 
    if($.trim($(this).val()) == ""){ 
    emailInvalidation(); 
    $('#inputText_infoBox p').html('Não se esqueça do seu e-mail!'); 
    } 
    else{ 
    emailValidation(); 
    $('#inputText_infoBox p').html('O endereço de e-email parece válido'); 
    } 
}); 

가 : 여기에 코드입니다 ? 어디서 어떻게 넣을 수 있습니까?

감사합니다.

페드로

Answer 1

당신은 당신의 else 문에 넣어, 인수로 필드의 값을 전달해야합니다

; 귀하의 코드는 다음과 같습니다 :

$('#userEmail').blur(function(){ 
    $(this).animate({'background-color':'#ffffff'}, 200); 
    if($.trim($(this).val()) == ""){ 
    $('#inputText_infoBox p').html('Não se esqueça do seu e-mail!'); 
    } 
    else{ 
    // Here you are passing the field value to the checkValidEmailAddress 
    // function, which will return true if the pattern is found, or false 
    // if it is not. 
    if(checkValidEmailAddress($(this).val())) 
     $('#inputText_infoBox p').html('O endereço de e-email parece válido'); 
    else 
     $('#inputText_infoBox p').html('O endereço de e-email parece inválido'); 
    } 
}); 

Answer 2

확장하기 쉽도록 대체 솔루션을 만들었습니다. http://jsbin.com/eyimis/1/ 및 코드는 여기에서 확인할 수 있습니다. http://jsbin.com/eyimis/1/edit

또한 입력을 모두 확인한 후에 제출 버튼을 표시 할 수도 있습니다.

var test = { 
    // Email 
    'email' : { 
    'validate' : 0, 
    'fn' : function(emailAddress) { 
     var pattern = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\ ".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA -Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
     return pattern.test(emailAddress); 
    } 
    }, 
    // First and last name 
    'name' : { 
    'validate' : 0, 
    'fn' : function(name) { 
     name = name.split(' '); 
     // Does it contain two names? 
     return name.length > 1 && name[1].length > 0; 
    } 
    } 
}, $error = $('#inputText_infoBox p'); 

var ready = function() { 
    // How many inputs do we have to validate? 
    var inputs = $.map(test, function(n, i) { return i; }).length, score = 0; 
    for(var key in test) { 
    // If this input is validated, we have ourselves a score! 
    if(test[key].validate === 1) { 
     score++; 
    } 
    // Is the amount of scores equal to to amount of inputs? 
    if(score === inputs) { 
     return true; 
    } 
    } 
}; 

$('input[type=text]').on({ 
    /* We'll check against a validate function every time the user 
    press a key, depending on what field the user is interacting with */ 
    keyup: function() { 
    var $this = $(this); 
    // Run the validate function for this particular input field 
    if(test[$this.attr('id')].fn($this.val())) { 
     // Validation returned true, yay! :) 
     test[$this.attr('id')].validate = 1; 
     $this.css({'background-color': '#00f000'}); 
     $error.html(''); 
    } else { 
     // It returned false :(
     test[$this.attr('id')].validate = 0; 
     $this.css({'background-color': '#ffffff'}); 
    } 
    if(ready()) { 
     $('#inputText_infoBox').after().html($('<input type="submit">')); 
    } else { 
     $button = $('input[type="submit"]'); 
     if(typeof $test !== undefined) { 
     $button.remove(); 
     } 
    } 
    }, 
    /* We'll do the check for empty text fields on blur to 
    avoid annoying errors */ 
    blur: function() { 
    var $this = $(this); 
    // Only run if input hasn't validated yet 
    if(test[$this.attr('id')].validate === 0) { 
     if($.trim($this.val()) === '') { 
     $error.html('Empty field'); 
     } 
     // The input got to be invalid! 
     else { 
     $error.html('Your ' + $this.attr('id') + ' is invalid'); 
     } 
    } 
    // It validated, clear error messages 
    else { 
     $error.html(''); 
    } 
    } 
});