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

也许这是一个相当虚拟的问题，但我找不到一个简单的解决方案（如特殊的HTML5属性）。如何在输入更改后才能验证输入？

比如我有一个简单的形式启用验证为email领域：

<form> 
    <input required type="email" placeholder="[email protected]"></input> 
</form>

而且有些款式供:valid, :invalid伪类：

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

所以，当我打开一个页面，此形式，输入已经是红色的边界，因为它是空的。问题是 - 只有在用户更改了smth后，我如何才能启用验证？

来源

2017-02-16 Sergey Potekhin

我不知道为什么每个人都错过了这一点，但它是*占位符 – zfrisch

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

<!-- added a ID to get it easier later --> 
<input required id="myInput" type="email" placehodler="[email protected]"></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 
}

来源

2017-02-16 23:11:15

输入值会用用户按下的每个按键动态检查。你可以自己调整需求。

var input = document.getElementById('input'); 
 

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

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

<form> 
 
    <input required type="email" placehodler="[email protected]" id='input' onkeyup='validate()'> 
 
</form>

来源

2017-02-16 23:14:54

你有一个敞开的一套方法来实现这一目标。我会去找最简单的：blur || input。

您可以附加input或blur事件并在事件发生时进行验证。不同之处在于blur在用户关注另一个元素（点击提交按钮，转到另一个输入，在页面中的其他地方点击，无论如何）时将被调用，并且input在用户改变输入内容后调用，通常通过按键，但也会在用户粘贴或剪切时发生。 input是监听输入元素的“官方”html5方式。

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

此外，您还可以去change事件，这是完全一样blur但它触发只有当用户更改内容。 “不好”的事情与blur相同：写作时无现场验证。

来源

2017-02-16 23:15:52

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

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 protected]"></input> 
</form>

来源

2017-02-16 23:19:26 zfrisch

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

回答

相关问题