Question

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

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

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 1

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

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

Answer 2

循环所有li个元素，并使用新文本检查innerText。如果您想忽略大小写，可以使用innerText.toUpperCase() === newText.toUpperCase()

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

你需要一个输入文本，因为id更好。在这里，我将insert_name设为id！通过querySelectAll获取所有符号，并使用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;
}

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

3 个答案: