【发布时间】：2011-11-24 05:34:29
【问题描述】：
我正在尝试实现来自 Javascript-Coder.com 的 JavaScript 表单验证脚本，该脚本位于 here。
我让它适用于表单上的元素，但我想知道如何让它与数组一起使用。具体来说，我在网页here 上有一个表单，用户可以在其中添加行。然后我有以下表格：
<form method="post" name="booking" id="booking" action="bookingengine.php">
<fieldset>
<h2>Waged/Organisation Rate</h2>
<p>
<input type="text" name="name[]" id="name">
<input type="text" name="email[]" id="email">
<input type="text" name="organisation[]" id="organisation">
<input type="text" name="position[]" id="position">
</p>
<p><span class="add">Add person</span></p>
</fieldset>
<fieldset>
<h2>Unwaged Rate</h2>
<p>
<input type="text" name="name2[]" id="name2">
<input type="text" name="email2[]" id="email2">
</p>
<p><span class="add">Add person</span></p>
</fieldset>
<p><input type="submit" name="submit" id="submit" value="Submit and proceed to payment page" class="submit-button" /></p>
</form>
目前表单验证器脚本如下所示：
<script language="JavaScript" type="text/javascript">
var frmvalidator = new Validator("booking");
frmvalidator.addValidation("email[]","req","Please enter a valid email address");
frmvalidator.addValidation("email[]","email","Please enter a valid email address");
</script>
但是，如果用户在表单的顶部添加第二行，则脚本只会验证第一行中的电子邮件地址，我想知道如何让它验证添加到形式也是如此。
其他信息
按照 Melsi 的建议，用于生成表单和处理验证的脚本已完全重写。下面 Melsi 的回答包括我要求的以下功能（其中大部分也在原始脚本中）：
- 页面加载时表单现在为空，所有行（文本框）都由用户使用按钮动态添加。
- 每个文本框的默认值在添加具有唯一颜色的新行时显示。
- 当用户单击每个文本框时，文本和背景的颜色会发生变化。
- 在每行的末尾添加了一个“删除”按钮，以便可以删除行。
需要验证
每一行所需的验证如下：
- 姓名：不是“姓名”（消息：“请输入您的姓名”），最多 100 个字符（消息：“您的姓名应少于 100 个字符”）
- 电子邮件：是有效的电子邮件地址（消息：“请输入有效的电子邮件地址”），最多 100 个字符（消息：“您的电子邮件地址应少于 100 个字符”）
- 职位：不是“职位”（消息：“请输入您的职位，如果不适用，请输入 N/A”），最多 100 个字符（消息：“您的职位应少于 100 个字符”）
- 组织：不是“组织”（消息：“请输入您的组织或 N/A if not applicable”），最多 100 个字符（消息：“您的组织 应少于 100 个字符")
然后我需要验证提交表单，以检查是否已将一行添加到表单中，并显示消息“请在您的预订中添加至少一个人”
验证示例：
//validate-name
box=document.getElementById(caller).name.charAt(0);
if(box=='n'){
if((document.getElementById(caller).value)=='Name')
{
alert('Please enter your name')
document.getElementById('message').innerHTML="<span>Please enter your name</span>";
//put focus back again if you like
document.getElementById(caller).focus();
return;
}
}
//if code comes here = validation success
document.getElementById(caller).style.backgroundColor = '#F5FEC1';
document.getElementById('message').innerHTML="<span style="+dbq+"background-color: #A3BB00"+ dbq+">Thanks!</span>";
}
【问题讨论】：
-
好的，谢谢。表格现在看起来像我想要的那样。你可以看到最新版本here。我现在正试图弄清楚验证是如何工作的。我现在要编辑原始问题，使其与您的答案相匹配，包括我需要的有关验证的更多信息。
-
嗨，梅尔西。当我问这个问题时，我才刚刚开始编写验证脚本，所以我只进行了电子邮件验证。这个验证是为我上面链接的 gen_validatorv4.js 脚本设计的，所以我假设它需要为你的脚本重写。我现在已经在原始问题中包含了我需要的所有验证。也许您可以提供一个示例，说明我将如何包含这些验证之一，以便我可以开始进行此操作？谢谢。
-
谢谢，我的电子邮件验证工作正常，但无法让其他验证工作。我已经包含了名称验证的代码，因为我在上面的问题末尾输入了它。使用此代码，脚本已损坏，我无法将文本框添加到表单中。
标签： javascript arrays forms validation