この単純な電子メール検証はなぜ実行されませんか？

Question

私はこの簡単なフォーム検証スクリプトを学校に書いていますが、absender()という電子メールをチェックする機能は動作しません。理由は分かりません。名前を検証している他の2つの関数が動作します。私は文字通り何日も何時間も試してみると、どんな助けでも大歓迎です。

window.onload = function() { 
 
    'use:strict'; 
 

 
    var nachName = document.getElementById('Nachname'); 
 
    nachName.addEventListener('blur', nName); 
 

 
    var vorName = document.getElementById('Vorname'); 
 
    vorName.addEventListener('blur', vName); 
 

 
    var absender = document.getElementById('Absender'); 
 
    absender.addEventListener('blur', absender); 
 

 
    function nName() { 
 
    var re = /^[A-Za-z]+$/; 
 

 
    if (re.test(document.Formular.Nachname.value)) { 
 
     document.getElementById("formuText").innerHTML = ""; 
 
    } else { 
 
     document.getElementById("formuText").innerHTML = "Fehlerhafte Eingabe!"; 
 
    } 
 
    } 
 

 
    function vName() { 
 
    var re = /^[A-Za-z]+$/; 
 

 
    if (re.test(document.Formular.Vorname.value)) { 
 
     document.getElementById("formuText").innerHTML = ""; 
 
    } else { 
 
     document.getElementById("formuText").innerHTML = "Fehlerhafte Eingabe!"; 
 
    } 
 
    } 
 

 
    function absender() { 
 
    var at = /\S+@\S+\.\S+/; 
 

 
    if (at.test(document.Formular.Absender.value)) { 
 
     document.getElementById("formuText").innerHTML = ""; 
 
    } else { 
 
     document.getElementById("formuText").innerHTML = "Fehlerhafte Eingabe!"; 
 
    } 
 
    } 
 
}

<form name="Formular"> 
 
    <p id="formuText"></p> 
 
    <fieldset name="fieldset"> 
 
    <legend>Persönliche Daten</legend> 
 
    <p id="formText"></p> 
 
    <label for="Nachname">Nachname</label> 
 
    <input type="text" id="Nachname" placeholder="Mustermann" name="Nachname"> 
 
    <label for="Vorname">Vorname</label> 
 
    <input type="text" id="Vorname" placeholder="Max" name="Vorname"> 
 
    <label for="absender">E-Mail:</label> 
 
    <input type="text" id="Absender" name="Absender" placeholder="MaxMuster@Mann.de"> 
 
    </fieldset> 
 
</form>

Answer 1

あなたの要素変数と検証機能と同じ名前を持ちます。

... 
var absender = document.getElementById('Absender'); // <-- this variable 
absender.addEventListener('blur', absender); 
... 
function absender() {        // <-- has the same name of this function 
    var at = /\S+@\S+\.\S+/; 
... 

これらは同じ名前を持つことはできません。大雑把に言えば、それらは同じ名前空間を占有しています。

機能や要素のいずれかの名前を変更、を修正するには：上記の例で

var absenderElement = document.getElementById('Absender'); // notice the variable rename 
absenderElement.addEventListener('blur', absender); 

、変数がabsenderからabsenderElementに名前が変更されましたので、この関数は名前absender()を維持することができます。

Answer 2

• varを関数と同じものを呼び出してワイプします。固定

  var abs = document.getElementById('Absender');
abs.addEventListener('blur', absender);
  

• またAbsender

• また、イベントハンドラ内でidでフィールドにアクセスする必要はありません

を指すようにニーズのためのあなたのラベルこと

window.onload = function() { 
 
    'use:strict'; 
 

 
    var nachName = document.getElementById('Nachname'); 
 
    nachName.addEventListener('blur', nName); 
 

 
    var vorName = document.getElementById('Vorname'); 
 
    vorName.addEventListener('blur', vName); 
 

 
    var abs = document.getElementById('Absender'); 
 
    abs.addEventListener('blur', absender); 
 

 
    function nName() { 
 
    var re = /^[A-Za-z]+$/; 
 
    if (re.test(this.value)) { 
 
     document.getElementById("formuText").innerHTML = ""; 
 
    } else { 
 
     document.getElementById("formuText").innerHTML = "Fehlerhafte Eingabe!"; 
 
    } 
 
    } 
 

 
    function vName() { 
 
    var re = /^[A-Za-z]+$/; 
 

 
    if (re.test(this.value)) { 
 
     document.getElementById("formuText").innerHTML = ""; 
 
    } else { 
 
     document.getElementById("formuText").innerHTML = "Fehlerhafte Eingabe!"; 
 
    } 
 
    } 
 

 
    function absender() { 
 
    var at = /\S+@\S+\.\S+/; 
 

 
    if (at.test(this.value)) { 
 
     document.getElementById("formuText").innerHTML = ""; 
 
    } else { 
 
     document.getElementById("formuText").innerHTML = "Fehlerhafte Eingabe!"; 
 
    } 
 
    } 
 
}

<form name="Formular"> 
 
    <p id="formuText"></p> 
 
    <fieldset name="fieldset"> 
 
    <legend>Persönliche Daten</legend> 
 
    <p id="formText"></p> 
 
    <label for="Nachname">Nachname</label> 
 
    <input type="text" id="Nachname" placeholder="Mustermann" name="Nachname"> 
 
    <label for="Vorname">Vorname</label> 
 
    <input type="text" id="Vorname" placeholder="Max" name="Vorname"> 
 
    <label for="Absender">E-Mail:</label> 
 
    <input type="text" id="Absender" name="Absender" placeholder="MaxMuster@Mann.de"> 
 
    </fieldset> 
 
</form>