JS添加删除一组文本框并对输入信息加以验证判断其正确性-前端开发

为了实现“JS添加删除一组文本框并对输入信息加以验证判断其正确性”，我们需要分为两个步骤来进行：

为了实现“JS添加删除一组文本框并对输入信息加以验证判断其正确性”，我们需要分为两个步骤来进行：

添加和删除文本框
对输入信息进行验证判断

下面详细讲解一下实现的过程。

添加和删除文本框

在HTML文件中，我们可以定义一个包含添加和删除按钮的表单。

<form>
  <div id="textboxes">
    <!-- 添加文本框的按钮 -->
    <button type="button" id="addButton">添加</button>
  </div>
</form>

在JavaScript代码中，我们可以通过添加和删除input元素的方式来实现文本框的添加和删除。

var textboxes = document.getElementById('textboxes');      // 获取文本框的父元素
var addButton = document.getElementById('addButton');      // 获取添加按钮元素

// 当点击添加按钮的时候
addButton.onclick = function() {
  var textbox = document.createElement('input');    // 创建一个新的文本框元素
  textbox.type = 'text';                            // 设置文本框的类型
  textboxes.appendChild(textbox);                   // 将新的文本框添加到父元素

  var deleteButton = document.createElement('button');      // 创建一个新的删除按钮元素
  deleteButton.type = 'button';
  deleteButton.textContent = '删除';                        // 设置删除按钮的文本
  deleteButton.onclick = function() {                        // 当点击删除按钮的时候
    textboxes.removeChild(textbox);                          // 从父元素中移除对应的文本框
    textboxes.removeChild(deleteButton);                      // 从父元素中移除对应的删除按钮
  };
  textboxes.appendChild(deleteButton);                        // 将新的删除按钮添加到父元素
};

示例1：

在 Codepen 中创建一个新的空白HTML文件，将上述代码复制并粘贴至 head 标签内。将下面的代码复制并粘贴至 body 标签内并预览。

<form>
  <div id="textboxes">
    <button type="button" id="addButton">添加</button>
  </div>
</form>

当点击添加按钮时，就会添加一个新的文本框以及一个删除按钮。

对输入信息进行验证判断

在JavaScript代码中，我们可以使用表单的 submit 事件来监听表单的提交行为。当表单被提交时，我们可以对其中所有的输入框都进行验证并检查其是否符合特定的要求。

var form = document.querySelector('form');   // 获取表单元素

form.addEventListener('submit', function(event) {
  var inputs = form.querySelectorAll('input');    // 获取表单中的所有输入框

  for (var i = 0; i < inputs.length; i++) {
    var input = inputs[i];

    // 如果输入框没有值
    if (input.value === '') {
      event.preventDefault();   // 阻止表单的提交行为
      alert('输入框' + (i+1) + '必填。');
      return;
    }

    // 如果输入框中的值不是数字
    if (isNaN(input.value)) {
      event.preventDefault();   // 阻止表单的提交行为
      alert('输入框' + (i+1) + '必须输入数字。');
      return;
    }
  }
});

示例2：

在示例1的基础上，将表单代码修改为如下：

<form>
  <div id="textboxes">
    <button type="button" id="addButton">添加</button>
  </div>
  <input type="submit" value="提交">
</form>

然后尝试提交表单。当提交表单的时候，会检查每个文本框的值是否为空以及是否为数字类型。如果值为空或不是数字类型，会弹出对应的提示信息并阻止表单的提交行为。

以上就是“JS添加删除一组文本框并对输入信息加以验证判断其正确性”的完整攻略。