在JavaScript中使用clone功能后如何进行验证？

Question

我使用JavaScript来克隆和添加行。如何对每一行进行单独验证？

var i = 0;
function cloneRow() {
    var row = document.getElementById("clone");
    var table = document.getElementById("data");
    var selectIndex = 1;

    var clone = row.cloneNode(true);

    table.appendChild(clone);
    clone.setAttribute("style", "");
}

function deleteRow(btn) {
    var result = confirm("Do you Want to delete this ?");
    if (result) {
        var row = btn.parentNode.parentNode;
        row.parentNode.removeChild(row);
    }
}

<div class="row">
    <div class="col-sm-12">
        <div class="col-sm-7"></div>
        <div class="col-sm-2">
            <button type="button"class="btn btn-primary default btn-xs" onclick="cloneRow()" >add more...</button>
        </div>
    </div>
</div><br><br>

<div class="row" id ="close">
    <div class="col-sm-4"></div>
    <div class='col-sm-4'>
        <form id="NAME_VALUE" method="POST">
            <table class="table-striped">
                <tbody id="data">
                    <tr id ="clone" style="display:none;">
                        <td>
                            Name :<input type="text" name="INPUT_NAME" style="width:100px;" id="name" name="INPUT_NAME"> 
                        </td>
                        <td>
                            Value :<input type="text" name="INPUT_VALUE" style="width:100px;" id="value" name="INPUT_VALUE"> 
                        </td>
                        <td>
                            <button type="button"class="btn btn-primary default btn-xs" name ="delete" style="margin-left: 5px;" onclick="deleteRow(this); return false;">
                                <span class="glyphicon glyphicon-remove-circle" style="text-align:center" ></span>
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Name :<input type="text" name="INPUT_NAME" style="width:100px;" id="name" name="INPUT_NAME"> 
                        </td>
                        <td>
                            Value :<input type="text" name="INPUT_VALUE" style="width:100px;" id="value" name="INPUT_VALUE"> 
                        </td>
                        <td>
                            <button type="button"class="btn btn-primary default btn-xs" name ="delete" style="margin-left: 5px;" onclick="deleteRow(this); return false;">
                                <span class="glyphicon glyphicon-remove-circle" style="text-align:center" ></span>
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table><br>
            <button type="button"class="btn btn-primary default btn-xs" style="margin-left: 5px;" onclick="submit_login(); return false;"> save.</button>
        </form>
    </div>
</div>

我想为每一行或<tr>创建此类验证。

单击添加按钮时，会动态添加新输入。但是，在提交表单时，只验证第一个输入字段。如何验证动态添加的输入？

Answer 1

如果要分隔每行的验证 - 您应该创建一个行构造函数。

基本上，当您克隆一个新行时 - 您将克隆构造函数及其所有方法。

var Row = function () {
  this.name = "";
  this.value = "";
  //add more properties
}

创建方法：

Row.prototype.verify = function () {
   return this.name !== `undefined` && this.value !== `undefined`;
}

在你的克隆功能中你只需要调用它：

var rowInstance = new Row();

你可以这样使用它：

if (rowInstance.verify()) {
   //if the row information is valid then do something
}