如何使用 Javascript 验证 <ul> 内的多封电子邮件？

Question

我正在尝试验证多个电子邮件地址，但似乎无法正常工作。我是 Javascript 新手，我在互联网上搜索了解决方案，但无济于事。

我可以打印电子邮件地址，但在验证中它总是返回 false 我做错了什么？

这个想法是，当用户想要删除地址时，可以将电子邮件地址添加到一个和一个删除按钮。我正在尝试在按下提交按钮时验证电子邮件。

if 语句在 for 循环内外都不起作用

我有什么：

function checkEmail() {
    // Get all nodes with querySelectorAll
        var elements = document.getElementById("ul-emaillist").getElementsByTagName("p");
   
    
    // Log values
        elements.forEach(element => console.log(element.innerText));
    
        for (let index = 0; index < elements.length; ++index) {
            const email = elements[index];
            validEmail(email);
    
        }
    
        if (!validEmail()){
            console.log("email klopt niet");
            return false;
        }else{
            return true;
        }
    }


    function validEmail(email) {
        var re = /^(([^<>()\[\]\\.,;:\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 re.test(email);
    };

<ul id="ul-emaillist">
        <li class="delete">
         <p>test@hotmail.com</p><button class="delete">delete</button>
        </li>
        <li class="delete">
         <p>testperson2@gmail.com</p><button class="delete">delete</button>
        </li>
       </ul>
       <button onclick="checkEmail()">Validate</button>
    

Answer 1

您需要将validEmail(email) 的输出设置为一个变量，并在if(!validEmail()) 行上检查它，如下所示：

function checkEmail() {
  // Get all nodes with querySelectorAll
  var elements = document.getElementById("ul-emaillist").getElementsByTagName("p");
  elements = [ ...elements ]

  // Log values
  // elements.forEach(element => console.log(element.innerText));
  let valid = false;
  let notvalid = false;

  for (let index = 0; index < elements.length; index++) {
    const email = elements[index].innerHTML;
    if (validEmail(email)) {
      valid = true;
    }

    if (!valid) {
      console.log("bad email: " + email);
      notvalid = true;
    } else {
      console.log("good email: " + email);
      valid = true;
    }
  }
  
  // use `valid` to check if ANY email is good
  // use `notvalid` to check if ALL email's are good
  if (valid) {
    return true;
  }
  return false;
}

function validEmail(email) {
  var re = /^(([^<>()\[\]\\.,;:\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 re.test(email);
};

<ul id="ul-emaillist">
  <li class="delete">
    <p>test@hotmail.com</p><button class="delete">delete</button>
  </li>
  <li class="delete">
    <p>testperson2@gmail.com</p><button class="delete">delete</button>
  </li>
</ul>
<button onclick="checkEmail()">Validate</button>

Answer 2

代码几乎可以运行，只是您忘记在elements[index] 中添加innerText

function checkEmail() {
    // Get all nodes with querySelectorAll
        var elements = document.getElementById("ul-emaillist").getElementsByTagName("p");
   
    
    // Log values
    
        for (let index = 0; index < elements.length; ++index) {
            const email = elements[index].innerText;
            validEmail(email);
    
        }
    
        if (!validEmail()){
            console.log("email klopt niet");
            return false;
        }else{
            return true;
        }
    }


    function validEmail(email) {
        var re = /^(([^<>()\[\]\\.,;:\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 re.test(email);
    };

<ul id="ul-emaillist">
  <li class="delete">
   <p>test@hotmail.com</p><button class="delete">delete</button>
  </li>
  <li class="delete">
   <p>testperson2@gmail.com</p><button class="delete">delete</button>
  </li>
</ul>
<button onclick="checkEmail()">Validate</button>

Answer 3

// Validate if all emails in the list are valid
function checkEmails() {
  const elements = document.getElementById('ul-emaillist').getElementsByTagName('p');

  let isValidEmails = true;
  elements.forEach(element => {
    const email = element.innerText;
    // will result in false if at least one email is invalid
    isValidEmails = isValidEmails && validEmail(email);
  });

  return isValidEmails;
}

Answer 4

使用querySelectorAll 选择所有li 元素，然后您可以循环并检索p 元素内的电子邮件文本。像这样：

function checkEmail() {
  const elements = document.querySelectorAll("li.delete");

  elements.forEach((element) => {
    const email = element.querySelector("p").textContent;
    if (isValidEmail(email)) {
      alert(`${email} VALID`)
    } else {
      alert(`${email} INVALID`)
    }
  })
}

function isValidEmail(email) {
  var re = /^(([^<>()\[\]\\.,;:\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 re.test(email);
};

<ul id="ul-emaillist">
  <li class="delete">
    <p>test@hotmail.com</p><button class="delete">delete</button>
  </li>
  <li class="delete">
    <p>testperson2@gmail.com</p><button class="delete">delete</button>
  </li>
  <li class="delete">
    <p>testperson2.com</p><button class="delete">delete</button>
  </li>
</ul>
<button onclick="checkEmail()">Validate</button>