1

我将下面的代码与输入框上的 HTML5 模式匹配以及 CSS3:invalid和伪选择器一起使用，以在输入框旁边:valid的可用区域中显示验证的输出（有效值与否） 。div.input-validation这按预期工作，但它在页面加载本身和重新加载页面期间显示验证标记（✘ - 无效输入）。我应该如何避免这种情况？

代码：

<style type="text/css">
  input {
    font-size: 1em;
    padding: .3em;
    border-radius: 3px;
    margin: .2em;
  } 
  input[type="text"]:valid {
    color: green;
  }
  input[type="text"]:valid ~ .input-validation::before {
    content: "\2714";
    color: green;
  }
  input[type="text"]:invalid ~ .input-validation::before {
    content: "\2718";
    color: red;
  }
  .input-validation {
    display: inline-block;
  } 
</style>
<?echo $passwordregister;?>
<input name="pw" autocomplete="off" type="text" id="pw" pattern="[a-zA-Z0-9]{6,22}" autofocus required >
<div class="input-validation"></div>
4

1 回答 1

3

您可以使用以下任一选项在页面加载时隐藏无效值 (✘) 符号。

选项1：在页面加载时隐藏span包含符号的符号，仅在keypress输入文本框发生某些事件时显示。

window.onload = function() {
  var el = document.querySelectorAll("input[type='text']");
  for (var i = 0; i < el.length; i++) {
    el[i].onkeypress = showSymbol;
  }

  function showSymbol() {
    this.nextElementSibling.style.display = "inline-block"; // display the span next to the input in which key was pressed.
  }
}
input {
  font-size: 1em;
  padding: .3em;
  border-radius: 3px;
  margin: .2em;
}
input[type="text"]:valid {
  color: green;
}
input[type="text"]:valid + .input-validation::before {
  content: "\2714";
  color: green;
}
input[type="text"]:invalid + .input-validation::before {
  content: "\2718";
  color: red;
}
.input-validation {
  display: none;
}
<input name="pw" autocomplete="off" type="text" id="pw" class="new" pattern="[a-zA-Z0-9]{6,22}" autofocus required/> <span class="input-validation"></span>

选项 2：根据某个类（比如visited）的存在定义 CSS 规则，并且仅当在输入框中按下某个键时才分配该类。

window.onload = function() {
  var el = document.querySelectorAll("input[type='text']");
  for (var i = 0; i < el.length; i++) {
    el[i].onkeypress = showSymbol;
  }

  function showSymbol() {
    this.classList.add("visited"); // add the visited class
  }
}
input {
  font-size: 1em;
  padding: .3em;
  border-radius: 3px;
  margin: .2em;
}
input[type="text"].visited:valid {
  color: green;
}
input[type="text"].visited:valid + .input-validation::before {
  content: "\2714";
  color: green;
}
input[type="text"].visited:invalid + .input-validation::before {
  content: "\2718";
  color: red;
}
.input-validation {
  display: inline-block;
}
<input name="pw" autocomplete="off" type="text" id="pw" class="new" pattern="[a-zA-Z0-9]{6,22}" autofocus required/> <span class="input-validation"></span>

笔记：

  • 我已将~您的 CSS 选择器中的替换为，+因为~选择与选择器匹配的所有兄弟，而+仅选择相邻的兄弟。只要您在第一个输入值，使用~将使所有输入框的旁边显示（当您在表单中有多个输入框时）。span
  • 我还修改了.input-validationfrom divto ，span但这更多是个人喜好，您可以保留原件div本身，而功能上没有任何差异。
于 2013-07-31T08:32:30.323 回答