来自另一个字段的 JavaScript 文本表单验证由相同的表单更新答案

【问题标题】：JavaScript text form validation from another field being updated by same form来自另一个字段的 JavaScript 文本表单验证由相同的表单更新
【发布时间】：2017-10-19 15:48:28
【问题描述】：

我创建了以下表单：当您在第一个文本框中输入名称时，它会在按下 + 按钮后将名称动态添加到下面的另一个字段中。该功能在 + 按钮上实现。

现在我想在同一个脚本中添加一个验证逻辑，因此不应将同一个名称添加两次。请指教，只想用javascript实现。

    function promptAdd(list){
    var text = "";
    var inputs = document.querySelectorAll("input[type=text]");
    for (var i = 0; i < inputs.length; i++) {
        text += inputs[i].value;
        }
    var li = document.createElement("li");
    var node = document.createTextNode(text);
    li.appendChild(node);
    document.getElementById("list").appendChild(li);

        }

<!doctype html>
<html>
<div class="row">
    <div class="col-lg-6 mb-1">
        <div class="card h-100 text-left">
            <div class="card-body">
                <h4 class="card-title">Add Resources</h4>
                <input type="text" class="form-control" name="employee" placeholder="Enter Name" />
                <small id="message" class="form-text text-muted">Press + to add to your list</small>
                <button id="bd1" class="btn add-more" onclick="promptAdd(list)" type="button">+</button>
                <br></br>
                <h5>List of Resources added</h5>
                <div class="form-control" id="list">
                    <span id="list">
                </div>
            </div>
        </div>
    </div>
</div>
</html>

【问题讨论】：

你有 es6 的访问权限吗？这可以使用 Sets 轻松完成。如果没有，只需使用indexOf 来查看值是否已存在，如果不存在则仅插入。不过，您必须保留一份已经存在的列表，或者每次都解析该列表。
最好的办法是维护一个项目数组。然后在数组中查看一个项目是否已经存在将非常容易。

标签： javascript html

【解决方案1】：

验证可以通过循环遍历所有li并将每个li的文本与input的值进行比较来实现，如果值匹配则返回false，如：

var lis = document.querySelectorAll('#list li');
for (var i = 0; i < lis.length; i++) {
  if (lis[i].innerText == text) {
    return false;
  }
}

希望这会有所帮助。

function promptAdd(list) {
  var text = "";
  var inputs = document.querySelectorAll("input[type=text]");
  
  for (var i = 0; i < inputs.length; i++) {
    text += inputs[i].value;
  }
  
  var lis = document.querySelectorAll('#list li');
  for (var i = 0; i < lis.length; i++) {
    if (lis[i].innerText == text ){
      resetInputs();
      
      return false;
    }
  }
  
  var li = document.createElement("li");
  var node = document.createTextNode(text);
    
  li.appendChild(node);
  document.getElementById("list").appendChild(li);
  
  resetInputs();
}

function resetInputs(){
  var inputs = document.querySelectorAll("input[type=text]");
  
  for (var i = 0; i < inputs.length; i++) {
    inputs[i].value = "";
  }
}

<div class="row">
  <div class="col-lg-6 mb-1">
    <div class="card h-100 text-left">
      <div class="card-body">
        <h4 class="card-title">Add Resources</h4>
        <input type="text" class="form-control" name="employee" placeholder="Enter Name" />
        <small id="message" class="form-text text-muted">Press + to add to your list</small>
        <button id="bd1" class="btn add-more" onclick="promptAdd(list)" type="button">+</button>
        <br><br>
        <h5>List of Resources added</h5>
        <div class="form-control" id="list">
          <span id="list"></span>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

谢谢。成功了，又一个QQ。在使用 .reset() 方法添加名称后，我还尝试重置输入名称表单字段；任何建议我应该在哪里添加。
很高兴我能帮上忙，您可以改用.value = "";，查看我的更新

【解决方案2】：

循环遍历所有li 元素并检查它们的innerText 与新文本。如果你想忽略大小写，你可以使用innerText.toUpperCase() === newText.toUpperCase()

function promptAdd(list) {
  var text = "";
  var inputs = document.querySelectorAll("input[type=text]");

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

  if (textAlreadyExistsInList(text)) {
    return;
  };

  var li = document.createElement("li");
  var node = document.createTextNode(text);
  li.appendChild(node);
  document.getElementById("list").appendChild(li);
};

function textAlreadyExistsInList(text) {
  var itemExists = false;
  var items = document.getElementById("list").querySelectorAll('li');

  for (var i = 0; i < items.length; i++) {
    if (items[i].innerText === text) { //to ignore casing: items[i].innerText.toUpperCase() === text.toUpperCase()
      itemExists = true;
      break;
    }
  }

  return itemExists;
}

<div class="row">
  <div class="col-lg-6 mb-1">
    <div class="card h-100 text-left">
      <div class="card-body">
        <h4 class="card-title">Add Resources</h4>
        <input type="text" class="form-control" name="employee" placeholder="Enter Name" />
        <small id="message" class="form-text text-muted">Press + to add to your list</small>
        <button id="bd1" class="btn add-more" onclick="promptAdd(list)" type="button">+</button>
        <br></br>
        <h5>List of Resources added</h5>
        <div class="form-control" id="list">

        </div>

【讨论】：

【解决方案3】：

您需要一个输入文本，因此 id 更好。在这里，我将 insert_name 设置为 id ！通过querySelectAll获取所有li，并通过innerHTML检查文本并输入值。

function promptAdd(list){
    var inputs = document.getElementById("insert_name").value;
    if(checkDuplicate(inputs)) return; // check duplicate
    var li = document.createElement("li");
    var node = document.createTextNode(inputs);
    li.appendChild(node);
    document.getElementById("list").appendChild(li);
}
function checkDuplicate(name) {
    var flag = false;
    var lis = document.querySelectorAll("li");
    for(var i = 0 ;i < lis.length;i++) {
        if(name == lis[i].innerHTML) {
            flag = true;
            break;
        }
    }
    return flag;
}

【讨论】：