我有一个相当大的形式，它有8个字段用于输入书籍。 现在，对于用户添加更多书籍，有一个按钮添加更多书籍，点击其中调用javascript函数，并且8个字段中的7个是重复的。
用户最多可以添加6本书，动态创建的所有输入字段都将其名称作为数组。我可以发布它们并存储在表格中，现在我想用javascript验证它们。
我已经尝试过一周以来这样做，并且是Javascript的新手。请帮帮我。
我的JAVASCRIPT代码
function addInput(divName){
var bname1 = new Array();
var abname1 = new Array();
var cost1 = new Array();
var num1 = new Array();
if (counter == limit)
{
alert("You have reached the limit of adding " + counter + " inputs");
}
else
{
var newdiv = document.createElement('div');
newdiv.innerHTML ="<table>"+ "<tr align='right'>" + "<td>"+ " Name of book" + (counter + 1) + " " +" : <input type='text' name='bname1[]' > "+"</td>" + "</tr>"+"<tr align='right'>"+ "<td>"+" Name of Authour"+(counter + 1)+" "+": <input type='text' name='aname1[]'>"+"</td>"+"</tr>"+"<tr align='right'>"+"<td>"+"Publisher"+(counter+1)+" "+": <input tyme='text' name='pub1[]'>"+"</td>"+"</tr>"+ "<tr align='right'>" +"<td>"+ "ISDN Number " + (counter + 1) +" "+ ": <input type='text' name='isdn1[]'> "+"</td>" + "</tr>"+"<tr align='right'>" +"<td>"+ " Edition " + (counter + 1) + " "+": <input type='text' name='edi1[]'> "+"</td>" + "</tr>"+"<tr align='right'>" + "<td>"+ "Price"+(counter + 1) +" "+ " :<input type='number' name='cost1[]'>"+"</td>"+"</tr>"+"<tr align='right'>" + "<td>"+ "Number of copies"+(counter + 1) +" "+ ": <input type='number' name ='num1[]'> "+"</td>" + "</tr>"+ "</table>";
// alert("counter +1 is "+counter+1);
document.getElementById(divName).appendChild(newdiv);
counter=counter+1;
}
}
html表单中有divsion，所有这些都添加到了。 请帮忙 ！ 提前谢谢..
答案 0 :(得分：0)
这是你的解决方案。 http://codebins.com/codes/home/4ldqpbq
HTML
<div id="testDiv">
</div>
<button onclick="addInput('testDiv')">
Add New Items
</button>
<button onclick="validate('testDiv')">
Validate
</button>
的JavaScript
var counter = 0;
var limit = 6
function addInput(divName) {
var bname1 = new Array();
var abname1 = new Array();
var cost1 = new Array();
var num1 = new Array();
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
} else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<table>" + "<tr align='right'>" + "<td>" + " Name of book" + (counter + 1) + " " + " : <input type='text' name='bname1[]' > " + "</td>" + "</tr>" + "<tr align='right'>" + "<td>" + " Name of Authour" + (counter + 1) + " " + ": <input type='text' name='aname1[]'>" + "</td>" + "</tr>" + "<tr align='right'>" + "<td>" + "Publisher" + (counter + 1) + " " + ": <input tyme='text' name='pub1[]'>" + "</td>" + "</tr>" + "<tr align='right'>" + "<td>" + "ISDN Number " + (counter + 1) + " " + ": <input type='text' name='isdn1[]'> " + "</td>" + "</tr>" + "<tr align='right'>" + "<td>" + " Edition " + (counter + 1) + " " + ": <input type='text' name='edi1[]'> " + "</td>" + "</tr>" + "<tr align='right'>" + "<td>" + "Price" + (counter + 1) + " " + " :<input type='number' name='cost1[]'>" + "</td>" + "</tr>" + "<tr align='right'>" + "<td>" + "Number of copies" + (counter + 1) + " " + ": <input type='number' name ='num1[]'> " + "</td>" + "</tr>" + "</table>";
// alert("counter +1 is "+counter+1);
document.getElementById(divName).appendChild(newdiv);
counter = counter + 1;
}
}
function validate(divName) {
var container = document.getElementById(divName).getElementsByTagName("input");
for (var len = container.length, i = 0; i < len; i++) {
// if only requried validation
if (container[i].value == "") {
container[i].style.borderColor = "red"
} else {
container[i].style.border = ""
}
//if you want saperate validation for each
switch (container[i].name) {
case "bname1[]":
//validate according to filed
break;
case "aname1[]":
//validate according to filed
break;
case "pub1[]":
//validate according to filed
break;
case "isdn1[]":
//validate according to filed
break;
case "edi1[]":
//validate according to filed
break;
case "cost1[]":
//validate according to filed
break;
case "num1[]":
//validate according to filed
break;
}
}
}
答案 1 :(得分：0)
您可以考虑几点建议： 1）考虑将您要复制的所有字段分组到表单中的单个div中。 然后，当用户想要添加新项目（书籍）时，您需要做的就是复制此div的内容。这样，您将只保留一个字段集副本。 2）也考虑动态通用表单验证。您可以使用额外的属性将验证规则添加到表单字段定义，即[＆lt; input ... validationRules =“mandatory，minimumLength = 10 ...”/＆gt;]我认为您可以使用JQuery实现类似的功能，但我个人不喜欢不使用大型图书馆来做小工作。 3）考虑给你的领域提供独特的ID。
答案 2 :(得分：0)
使用
var bname= document.getElementsByName('bname1[]');
var aname=document.getElementsByName('aname1[]'); .........
for(var i=0;i<bname.length;i++)
{
//Your validations
}
for(var i=0;i<aname.length;i++)
{
//Your validations
}.....
.. 为代码中的所有元素执行此操作..
答案 3 :(得分：0)
验证功能示例：
function validate_field(f) { // f is input element
var name = f.name; // or also f.getAttribute('name')
var value = f.value; // or also f.getAttribute('value'), but should be defined
var error_div = document.getElementById(name+'err');
//alert('name '+name+' value '+value);
if (name.indexOf('bname') == 0) { // if validate book name
if (value == '') { // e.g. book name should not be empty string?
error_div.innerHTML = 'book name cannot be empty!';
return false; // field is wrong
}
}
else if (name.indexOf('aname') == 0) { // if validate author name
if (value.length<2) {
error_div.innerHTML = 'author\'s name is too short!';
return false; // at least two characters long name? :)
}
}
else if (name.indexOf('pub') == 0) { // if validate publisher
if (value.length<2) {
error_div.innerHTML = 'publisher\'s name is too short!';
return false;
}
}
else if (name.indexOf('isdn') == 0) { // if validate ISDN Number
if (value == '') {
error_div.innerHTML = 'ISDN cannot be empty!';
return false;
}
}
else if (name.indexOf('edi') == 0) { // if validate Edition
if (value == '') {
error_div.innerHTML = 'edition cannot be empty!';
return false;
}
}
else if (name.indexOf('cost') == 0) { // if validate Price
if (value=='') {
error_div.innerHTML = 'Cannot be empty!';
return false;
}
if (isNaN(value)) {
error_div.innerHTML = 'Please write a price using digits!';
return false;
}
}
else if (name.indexOf('num') == 0) { // if validate Number of copies
if (value=='') {
error_div.innerHTML = 'Cannot be empty!';
return false;
}
if (isNaN(value)) {
error_div.innerHTML = 'Please number of copies via digits!';
return false;
}
}
error_div.innerHTML = 'ok';
return true; // field is ok
// you can also have a look at http://www.javascript-coder.com/html-form/javascript-form-validation.phtml
}
这里有完整的工作脚本：pastebin.com/UkVP2uLb