Question

我做了一个小的输入验证。现在的问题是，在每个输入字段后面都显示：“电子邮件不能为空”。目的是他选择输入字段的名称，并将这些名称放在消息之前。因此，您得到：“用户名不能为空，密码不能为空，passwordCheck不能为空”。这样，我希望input fields和spans相互连接。这可能吗？如果是这样，怎么办？预先谢谢你。

HTML

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="span.js"></script>

    <script>
        window.onload = function() {
            //validator.className = "ValidateField";
        }
    </script>
</head>

<body>

    <form>
        <div>
            Name: <input type="text" name="userName" class="ValidateField" data-validate="EmptyAllowed|min-5|max-20">
            <span class="SpanField" name="spanUser" style="color:red"></span>
        </div>
        <div>
            Password: <input type="password" name="password" class="ValidateField" data-validate="EmptyAllowed|min-5|max-20|symbols-not-allowed">
            <span name="spanPassword" class="SpanField" style="color:red"></span>
        </div>
        <div>
            Password again: <input type="password" class="ValidateField" name="passwordCheck" data-validate="EmptyNotAllowed|min-5|max-20">
            <span name="spanPasswordCheck" class="SpanField" style="color:red"></span>
        </div>
        <div>
            E-mail: <input type="email" name="email" class="ValidateField" data-validate="EmptyNotAllowed|min-5|max-100">
            <span name="spanEmail" class="SpanField" style="color:red"></span>
        </div>
        <div>
            <input type="button" value="registreren" onclick="validator.validateNow()">
        </div>
    </form>
</body>

</html>

JavaScript

var validator = (function () {
        var my = {};
        var checkList = {};
        var minList = {};
        var maxList = {};
        var validationFields;


        function validateField(field) {

            function showText(error) {
                var spans = document.getElementsByClassName("SpanField");

                for (s = 0; s < spans.length; s++) {
                    spans[s];
                }

                var say = function () {
                    spans[0].innerHTML = (field.name + error);
                    spans[1].innerHTML = (field.name + error);
                    spans[2].innerHTML = (field.name + error);
                    spans[3].innerHTML = (field.name + error);
                }
                say();
            }
            var checks = field.dataset.validate;

            checkList = checks.split('|');

            var min = checkList[1];
            minList = min.split('-');

            var max = checkList[2];
            maxList = max.split('-');

            if (EmptyNotAllowed(field.value)) {
                showText(" can't be empty");

            } else {
                alert(field.name + "OK!");
            }

            if (minLength(field.value)) {
                showText("must be longer");
            }

            if (maxLength(field.value)) {
                showText("must be shorter");
            }
        }



        function EmptyNotAllowed(value) {
            if (value == '') {
                return true;
            } else {
                return false;
            }
        }

        function SymbolsNotAllowed() {
            alert("binnenkort beschikbaar");
            return true;
        }


        function minLength(value) {
            if (value.length > 0 && value.length < minList[1]) {
                return true;
            } else {
                return false;
            }
        }

        function maxLength(value) {
            if (value.length > maxList[1]) {
                return true;
            } else {
                return false;
            }
        }

        my.className = "ValidateField";

        my.validateNow = function () {

            validationFields = document.getElementsByClassName(my.className);

            for (f = 0; f < validationFields.length; f++) {
                validateField(validationFields[f]);
            }

        };

        return my;
    }());

Answer 1

您应该将正在验证的当前字段对象传递给showText函数，然后使用field.nextElementSibling获得span并向您的showText()函数显示innerhtml看起来像以下。

function showText(field,error) {
  var say = function(span) {
    span.innerHTML = (field.name + error);
  }

  //get the span
  let span=field.nextElementSibling;

  say(span);
}

查看演示

var validator = (function() {
  var my = {};
  var checkList = {};
  var minList = {};
  var maxList = {};
  var validationFields;


  function validateField(field) {

    function showText(field, error) {
      console.log(field.nextElementSibling);

      let span = field.nextElementSibling;
      var say = function(span) {
        span.innerHTML = (field.name + error);
      }
      say(span);
    }

    var checks = field.dataset.validate;

    checkList = checks.split('|');

    var min = checkList[1];
    minList = min.split('-');

    var max = checkList[2];
    maxList = max.split('-');

    if (EmptyNotAllowed(field.value)) {
      showText(field, " can't be empty");

    } else {
      alert(field.name + "OK!");
    }

    if (minLength(field.value)) {
      showText(field, "must be longer");
    }

    if (maxLength(field.value)) {
      showText(field, "must be shorter");
    }
  }



  function EmptyNotAllowed(value) {
    if (value == '') {
      return true;
    } else {
      return false;
    }
  }

  function SymbolsNotAllowed() {
    alert("binnenkort beschikbaar");
    return true;
  }


  function minLength(value) {
    if (value.length > 0 && value.length < minList[1]) {
      return true;
    } else {
      return false;
    }
  }

  function maxLength(value) {
    if (value.length > maxList[1]) {
      return true;
    } else {
      return false;
    }
  }

  my.className = "ValidateField";

  my.validateNow = function() {

    validationFields = document.getElementsByClassName(my.className);

    for (f = 0; f < validationFields.length; f++) {
      validateField(validationFields[f]);
    }

  };

  return my;
}());
window.onload = function() {
  //validator.className = "ValidateField";
}

<form>
  <div>
    Name: <input type="text" name="userName" class="ValidateField" data-validate="EmptyAllowed|min-5|max-20">
    <span class="SpanField" name="spanUser" style="color:red"></span>
  </div>
  <div>
    Password: <input type="password" name="password" class="ValidateField" data-validate="EmptyAllowed|min-5|max-20|symbols-not-allowed">
    <span name="spanPassword" class="SpanField" style="color:red"></span>
  </div>
  <div>
    Password again: <input type="password" class="ValidateField" name="passwordCheck" data-validate="EmptyNotAllowed|min-5|max-20">
    <span name="spanPasswordCheck" class="SpanField" style="color:red"></span>
  </div>
  <div>
    E-mail: <input type="email" name="email" class="ValidateField" data-validate="EmptyNotAllowed|min-5|max-100">
    <span name="spanEmail" class="SpanField" style="color:red"></span>
  </div>
  <div>
    <input type="button" value="registreren" onclick="validator.validateNow()">
  </div>
</form>

用跨度连接输入

1 个答案: