Объедините 2 элемента внутри onClick

Question

У меня это отлично работает, используя 1 вызов onClick (выполняет проверку электронной почты).

<script type='text/javascript'>
function emailValidator(elem, helperMsg){
    var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
    if(elem.value.match(emailExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}
</script>

В теле моей страницы

<a href="#" 
   title="Yes, Count Me In!" 
   onclick="emailValidator(document.getElementById('email'), 'Please Enter A Valid Email'); return false;"
>

----> Сейчас,Можно ли выполнить условие для этого onClick?Если поле электронной почты является действительным, выполните этот дополнительный вызов ( rsvp ('yes'); ).

<a href="#" 
   title="Yes, Count Me In!" 
   onclick="emailValidator(document.getElementById('email'), 'Please Enter A Valid Email'); rsvp('yes'); return false;" 
>

Answer 1

<a href="#" title="Yes, Count me In!" onclick="myFunction">

<script>
    function myFunction() {
        var elem = document.getElementById("email");
        emailValidator(elem, 'Please Enter A Valid Email') && rsvp('yes'); 
    }

    var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;

    function emailValidator(elem, helperMsg){
        return elem.value.match(emailExp) ?
            true :
            (alert(helperMsg), elem.focus(), false);
    }

</script>

Сначала абстрагируйте код onclick от глобальной функции. Затем подтвердите адрес электронной почты и запустите только функция rsvp, если адрес электронной почты действителен (т.е. он возвращает true)

Answer 2

Вы можете просто добавить вызов к вашей функции rsvp(), если она пройдет проверку.Как это:

function ValidateAndRSVP(elem, helperMsg){     
    var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;     
    if(elem.value.match(emailExp)){  
        rsvp('yes');      
        return true;     
    }
    else{         
        alert(helperMsg);         
        elem.focus();         
        return false;     
    }
}

Answer 3

Да, конечно, это возможно, но, вероятно, не получится так, как вы этого хотите.Таким образом, ваш код будет вызывать nomatter функции rsvp, что вы получаете из функции emailValidator.Возможно, вы захотите сделать что-то вроде этого:

<a href="#" title="Yes, Count Me In!" onclick="if(emailValidator(document.getElementById('email'), 'Please Enter A Valid Email')){rsvp('yes');};return false;">

Еще один полезный совет для вас - заменить document.getElementById -часть на this, например:

<a href="#" title="Yes, Count Me In!" onclick="if(emailValidator(this, 'Please Enter A Valid Email')){rsvp('yes');};return false;">

Thisследует убедиться, что даже если вы переименуете идентификатор входа, он все равно будет работать.Находясь внутри onclick или onchange или чего-либо еще, это всегда относится к объекту, по которому щелкают / редактируют / и т.д.

Кроме того, как предложили другие, я бы порекомендовал сделать функцию, которая сделает это за вас, но язнаю людей, которые любят помещать всю свою логику в обработчик onclick, и поскольку это то, о чем вы просили, я подумал, что покажу как.Тем не менее, обратите внимание, что это быстро запутывается, и что-то вроде

function rsvpClick() {
    if(emailValidator(document.getElementById('email'), 'Please Enter A Valid Email')) rsvp('yes');
}

, а затем

<a href="#" title="Yes, Count Me In!" onclick="rsvpClick();">

обычно намного более чистое и читаемое.

Answer 4

сделать глобальную функцию, которая обрабатывает логику, и вызвать эту функцию в событие onclick