Javascript字段验证循环答案

【问题标题】：Java script field verification loopJavascript字段验证循环
【发布时间】：2016-06-04 09:46:51
【问题描述】：

我正在为版主创建一个表单以添加新用户。表格最多可以展开为六行。我设置了js邮箱验证，但是它只检查第一行，所以如果版主添加了多行，我需要添加一个循环来检查另一行的电子邮件字段。

HTML 代码是：

<td><input class="eml" name="email"></td>

如果添加更多行，字段名称将是：

<td><input class="eml" name="email"></td>
<td><input class="eml" name="email2"></td>
<td><input class="eml" name="email3"></td>
<td><input class="eml" name="email4"></td>
<td><input class="eml" name="email5"></td>

我使用的js函数是：

function ValidateEmail()
{
var regexEmail = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
var email = document.getElementById("pls").elements.namedItem("email").value;
if (!(regexEmail.test(email))) {
  document.pls.email1.focus() ;
  //email.focus();
  alert("Please enter a valid email address");
  return false;
}
else {
  return true;
}
}

我知道一种添加循环的方法，但问题是我无法用变量替换 elements.namedItem("email") 中的“电子邮件”名称

我的问题是：

我怎么会有这样的东西：

var email = document.getElementById("pls").elements.namedItem("email[i]").value;

所以我可以在循环中重复它以获取下一个电子邮件字段。

如果您有任何替代方法，将不胜感激:)

【问题讨论】：

一种简单但可能无法使用的方法是使用 jquery，使用以选择器开头的属性，您可以选择所有以 [name^='email'] 开头的元素并循环用正则表达式遍历每个元素
感谢您的建议，但没有 jquery。我只想在我的代码中添加一个循环。
为什么要限制可以添加的用户数量？使它们不受限制，并使用数组样式名称name=email[]。大多数服务器库会自动从中创建一个参数数组。
那个正则表达式不允许很多generic top-level domains。它也不允许像firstname+lastname@example.com这样的有效地址。
@robertklep 那么你建议我用什么？

标签： javascript loops email-validation

【解决方案1】：

看来您也可以使用常规 js 使用返回 NodeList 的 querySelectorAll 从选择器开始属性。

在运行代码的例子中，函数运行时第三封邮件是空的，所以会聚焦并要求一个有效的邮件

function ValidateEmail() {
  var regexEmail = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

  var emailFields = document.querySelectorAll('input[name^="email"]');

  for (var i = 0; i < emailFields.length; i++) {
    if (!regexEmail.test(emailFields[i].value)) {
      emailFields[i].focus();
      alert("Please enter a valid email address");
      return false;
    }
  }
  return true;
}

ValidateEmail();

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width"> 
</head>
<body>
<td><input class="eml" name="email" value="validemail@test.com"></td><br>
<td><input class="eml" name="email2" value="validemail@test.com"></td><br>
<td><input class="eml" name="email3"></td><br>
<td><input class="eml" name="email4"></td><br>
<td><input class="eml" name="email5"></td>
</body>
</html>

如果您还使用表单，您可以查看输入标签上的“模式”属性，您可以将正则表达式直接应用于字段

【讨论】：

谢谢伙计。你拯救了我的一天；）

【解决方案2】：

在 Javascript 中，您可以使用 + 运算符连接字符串。所以要得到字符串'email1'，你可以做'email'+1。

因此，在您的循环中，您可以：

var email = document.getElementById("pls").elements.namedItem("email"+i).value;

如果您坚持第一行名称为 email（而不是 email1），您可以这样做：

var iclean = (i === 1) ? '' : i;
var email = document.getElementById("pls").elements.namedItem("email"+iclean).value;

【讨论】：

谢谢。如何用变量替换（“电子邮件”+ i）。喜欢：（$cnt）！ – PersianHero 刚刚编辑
@PersianHero i 是一个变量。如果您的循环遍历cnt 而不是i，您将使用("email"+cnt)。
@PersianHero 对于这种特定情况，另一个答案更清晰。（但我要留下这个答案，因为在某些情况下它可能对其他人有用。）您还应该考虑 Barbar 关于不限制输入数量或至少将它们作为数组处理的评论。