Java 脚本字段验证循环

Question

我正在为版主创建一个表单来添加新用户。表格最多可以展开六行。我已经设置了 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") 中的 'email' 名称

我的问题是：

我怎么会有这样的东西:

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

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

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

Answer 1

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

Answer 2

看来您也可以使用常规 js 以选择器开始属性，使用 querySelectorAll，其中 returns 一个 NodeList。

在运行代码的示例中，当函数为运行时，第三封电子邮件为空，因此将聚焦并要求提供有效的电子邮件

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>

如果您也在使用表单，您可以查看输入标签上的 "pattern" 属性，您可以将正则表达式直接应用于字段

Java 脚本字段验证循环

Java script field verification loop

javascript

loops

email-validation