gpt4 book ai didi

javascript - Javascript 字段验证循环

转载 作者:行者123 更新时间:2023-11-28 18:32:59 25 4
gpt4 key购买 nike

我正在为版主创建一个表单来添加新用户。该表格最多可以扩展到六行。我已经设置了 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") 中的“电子邮件”名称

我的问题是:

  1. 我怎样才能拥有这样的东西:

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

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

  • 如果您有任何替代方法,我们将不胜感激:)
  • 最佳答案

    看来您还可以使用常规 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>

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

    关于javascript - Javascript 字段验证循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37628762/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com