Question

这可能是一个非常简单的问题，但我找不到一个简单的解决方案（类似于特殊的HTML5属性）。

例如，我有一个简单的表单，其中email字段已启用验证：

<form>
    <input required type="email" placeholder="email@gmail.com"></input>
</form>

:valid, :invalid伪类的一些样式：

input:valid {
  border: 1px solid green;
}
input:invalid {
  border: 1px solid red;
}

所以，当我用这个表单打开一个页面时，输入已经是红色边框，因为它是空的。问题是 - 如何在用户更改smth后才能启用验证？

Answer 1

您可以使用onchange event，请参阅：

<!-- added a ID to get it easier later -->
<input required id="myInput" type="email" placehodler="email@gmail.com"></input>

在你的css中，使用类来设置你的风格：

input.valid {
  border: 1px solid green;
}
input.invalid {
  border: 1px solid red;
}

在你的javascript中：

document.getElementById('myInput').onchange = function(){
     // validation code here

     this.classList.add('valid') // if validation is true
     this.classList.add('invalid') // if validation is false
}

Answer 2

将使用用户按下的每个键动态检查输入值。您可以自己调整要求。

＆＃13;

var input = document.getElementById('input');

function validate(){
  if (input.value.length > 2) {
    input.className = 'valid';
  } else {
    input.className = 'invalid';
  }
}

＆＃13;

.valid {
  border: 1px solid green;
}
.invalid {
  border: 1px solid red;
}

＆＃13;

<form>
    <input required type="email" placehodler="email@gmail.com" id='input' onkeyup='validate()'>
</form>

＆＃13;

Answer 3

你有一套广泛的方法来实现这一目标。我会选择最简单的：blur || input。

您可以附加input或blur个事件，并在事件发生时进行验证。不同之处在于，当用户聚焦另一个元素时，将调用blur（单击提交按钮，转到另一个输入，单击页面中的其他位置，无论如何），并在用户更改后立即调用input输入中的某些东西，通常是通过按键，但也会在用户粘贴或剪切时发生。 input是听取输入元素的“官方”html5方式。

document.getElementById('emailInput').oninput = function(){
    // validateinput
}

此外，您可以选择与change完全相同的blur事件，但仅在用户更改内容时触发。 “坏”的东西与blur相同：写作时没有实时验证。

Answer 4

您可以使用querySelector来区分有效和无效而不是css。您应该使用keyup或keydown代替change事件，因为更改需要您重新聚焦以进行验证。

JS

myform.querySelector('input').addEventListener('keyup', function() {
  if (myform.querySelector('input:invalid')) myform.querySelector('input:invalid').style.border = "1px red solid";
  else myform.querySelector('input:valid').style.border = "1px solid green";
});

HTML

<form id="myform">
  <input required type="email" placeholder="email@gmail.com"></input>
</form>

如何在输入更改后验证输入？

4 个答案: