javascript - 如何在焦点事件的元素下方动态添加跨度？

Question

我正在编写自己的验证代码，但我不知道如何在输入值长度为 0 时在输入下方动态添加带有消息的跨度。我知道我可以在每个输入元素下方放置一个跨度并在需要之前给他们一个无显示，但这会破坏动态创建跨度的目的，并且可能需要一段时间才能取决于它的使用方式。

我将如何实现这一目标？

<style scoped>
    #userDetails {
        margin-top:60px;
    }
</style>

<div id="userDetails" class="form-horizontal">
    <div class="row">
        <div class="form-group">
            <label class="col-md-2 control-label" for="txtFirstName">First Name</label>
            <div class="col-md-6 col-lg-6">
                <input id="txtFirstName" is-required class="form-control input-sm" />
            </div>
        </div>
    </div>

    <div class="row">
        <div class="form-group">
            <label class="col-md-2 control-label" for="txtLastName">Last Name</label>
            <div class="col-md-6 col-lg-6">
                <input id="txtLastName" is-required class="form-control input-sm" />
            </div>
        </div>
    </div>

    <div class="row">
        <div class="form-group">
            <label class="col-md-2 control-label" for="txtEmail">E-mail</label>
            <div class="col-md-6 col-lg-6">
                <input id="txtEmail" is-required class="form-control input-sm" />
            </div>
        </div>
    </div>

</div>

function ValidationCheck() {
  let isRequired = document.querySelectorAll('[is-required]');
  isRequired.forEach(function(element) {
    element.addEventListener('focusout', (e) => {
      if (element.value.length == 0) {
        element.style.border = "1px solid red";
        if (element.classList.contains("clear")) {
          element.classList.remove("clear");
        }
      } else {
        element.style.border = "1px solid green";
        element.classList.add("clear");
      }
    });
    element.addEventListener('keyup', (e) => {
      element.style.border = "1px solid green";
    });
  });
}

$(document).ready(function() {
  ValidationCheck();
});

function ValidationCheck() {
  let isRequired = document.querySelectorAll('[is-required]');
  isRequired.forEach(function(element) {
    element.addEventListener('focusout', (e) => {
      if (element.value.length == 0) {
        element.style.border = "1px solid red";
        if (element.classList.contains("clear")) {
          element.classList.remove("clear");
        }
      } else {
        element.style.border = "1px solid green";
        element.classList.add("clear");
      }
    });
    element.addEventListener('keyup', (e) => {
      element.style.border = "1px solid green";
    });
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<style scoped>
  #userDetails {
    margin-top: 60px;
  }
</style>

<div class="container">
  <div id="userDetails" class="form-horizontal">
    <div class="row">
      <div class="form-group">
        <label class="col-sm-2 col-md-2 control-label" for="txtFirstName">First Name</label>
        <div class="col-sm-6 col-md-6 col-lg-6">
          <input id="txtFirstName" is-required class="form-control input-sm" />
        </div>
      </div>
    </div>

    <div class="row">
      <div class="form-group">
        <label class="col-sm-2 col-md-2 control-label" for="txtLastName">Last Name</label>
        <div class="col-sm-6 col-md-6 col-lg-6">
          <input id="txtLastName" is-required class="form-control input-sm" />
        </div>
      </div>
    </div>

    <div class="row">
      <div class="form-group">
        <label class="col-sm-2 col-md-2 control-label" for="txtEmail">E-mail</label>
        <div class="col-sm-6 col-md-6 col-lg-6">
          <input id="txtEmail" is-required class="form-control input-sm" />
        </div>
      </div>
    </div>

  </div>
</div>

标签： javascript

Answer 1

这是添加包含一些文本的跨度的示例，请根据您的需要进行编辑/更新/更改。

$(document).ready(function() {
  ValidationCheck();
});

function ValidationCheck() {
  let isRequired = document.querySelectorAll('[is-required]');
  isRequired.forEach(function(element) {
    element.addEventListener('focusout', (e) => {
      if (element.value.length == 0) {
        element.style.border = "1px solid red";
        
var parentDiv = element.parentNode;
var para = document.createElement("span");
var node = document.createTextNode("This is new.");
para.appendChild(node);
parentDiv.appendChild(para);

        if (element.classList.contains("clear")) {
          element.classList.remove("clear");

        }
      } else {
        element.style.border = "1px solid green";
        element.classList.add("clear");
      }
    });
    element.addEventListener('keyup', (e) => {
      element.style.border = "1px solid green";
    });
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<style scoped>
  #userDetails {
    margin-top: 60px;
  }
</style>

<div class="container">
  <div id="userDetails" class="form-horizontal">
    <div class="row">
      <div class="form-group">
        <label class="col-sm-2 col-md-2 control-label" for="txtFirstName">First Name</label>
        <div class="col-sm-6 col-md-6 col-lg-6">
          <input id="txtFirstName" is-required class="form-control input-sm" />
        </div>
      </div>
    </div>

    <div class="row">
      <div class="form-group">
        <label class="col-sm-2 col-md-2 control-label" for="txtLastName">Last Name</label>
        <div class="col-sm-6 col-md-6 col-lg-6">
          <input id="txtLastName" is-required class="form-control input-sm" />
        </div>
      </div>
    </div>

    <div class="row">
      <div class="form-group">
        <label class="col-sm-2 col-md-2 control-label" for="txtEmail">E-mail</label>
        <div class="col-sm-6 col-md-6 col-lg-6">
          <input id="txtEmail" is-required class="form-control input-sm" />
        </div>
      </div>
    </div>

  </div>
</div>