2

我有一个相当大的表格，它有 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 表单中有一个部分，所有这些都添加到其中。请帮忙 ！提前谢谢..

4

4 回答 4

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

        }

    }
于 2012-07-04T08:53:05.607 回答
0

Couple of suggestions for you to consider: 1) consider grouping ALL the fields you want to duplicate inside a single div in your form. Then when the user wants to add new item (book) all you will need to do will be copy the content of this div. This way you will maintain only one copy of field-set. 2) consider dynamic generic form validation too. You add the validation rules to your form field definition with extra attributes i.e. [<input ... validationRules="mandatory,minimumLength=10..." />] I think that you can achieve something similar with JQuery, but I personally prefer NOT to use large libraries to do small jobs. 3) consider giving your fields unique ids too.

于 2012-07-04T09:00:58.923 回答
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
}.....

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

于 2012-07-04T10:05:01.780 回答
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

于 2012-07-04T12:50:23.820 回答