使用 javascript 验证输入数组

这是您的解决方案。 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） 考虑将要复制的所有字段分组到表单的单个div 中。然后，当用户想要添加新项目（书籍）时，您需要做的就是复制此div的内容。这样，您将只维护字段集的一个副本。2） 还要考虑动态通用表单验证。您将验证规则添加到具有额外属性的表单字段定义中，即 [<输入 _x002E_..validationRules="强制性，minimumLength=10..." />] 我认为你可以用 JQuery 实现类似的东西，但我个人不喜欢使用大型库来完成小型工作。3）考虑也为您的字段提供唯一的ID。

使用

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
}.....

..对代码中的所有元素执行此操作。

验证函数示例：

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