Question

我为学校编写了这个简单的表格验证脚本，但检查电子邮件的功能，名为absender()，并不起作用，我不明白为什么。验证名称的其他两个函数确实有效。我现在真的花了几天时间，非常感谢任何帮助。

＆＃13;

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!";
    }
  }
}

＆＃13;

<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>

＆＃13;

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访问字段

＆＃13;

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!";
    }
  }
}

＆＃13;

<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>

＆＃13;

为什么这个简单的电子邮件验证没有执行？

2 个答案: