javascript 如何使用 Java Script 实时验证表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21895289/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to validate a form in real time using Java Script
提问by Claudio Delgado
I want to put green ticks next to correct inputs as users fill them up
当用户填写正确的输入时，我想在正确的输入旁边打上绿色的勾
here's how I have everything set up:
这是我设置所有内容的方式：
<label>
<select class="allselect" onChange="check(this.name)" name="typeselect" id="typeselect">
<option value="off">Select...</option>
<option value="normalshoes">normalshoes</option>
<option value="smallshoes">smallshoes</option>
<option value="bigshoes">bigshoes</option>
<option value="coats">coats</option>
<option value="regularpants">regularpants</option>
<option value="bigpants">bigpants</option>
<option value="tshirt">tshirt</option>
<option value="long">long</option>
<option value="big">big</option>
<option value="dress">dress</option>
<option value="hats">hats</option>
<option value="bags">bags</option>
<option value="glasses">glasses</option>
<option value="other">other</option>
</select>
</label>
<div id="typeselectIMG" class="status"><img src="http://oi62.tinypic.com/2d0l214.jpg" alt="OK" class="IMGself"></div>
<div id="secondstep">
<input type="text" class="quantity" onKeyPress="check(this.name)" name="quantity" id="quantity">
<div id="quantityIMG" class="status"><img src="http://oi62.tinypic.com/2d0l214.jpg" alt="OK" class="IMGself"></div>
</div>
and JS:
和JS：
function check(id) {
var idValue = document.getElementsByName(id)[0];
var Valueit = idValue.value;
if (id == 'typeselect') {
if (idValue != '' && Valueit != 'off') {
document.getElementById(id + 'IMG').style.visibility = 'visible';
document.getElementById('secondstep').style.visibility = 'visible';
}
if (Valueit == 'off') {
document.getElementById(id + 'IMG').style.visibility = 'hidden';
document.getElementById('quantityIMG').style.visibility = 'hidden';
document.getElementById('secondstep').style.visibility = 'hidden';
}
}
if (id == 'quantity') {
function testallthetime() {
if (Valueit != '') {
document.getElementById(id + 'IMG').style.visibility = 'visible';
document.getElementById('secondstep').style.visibility = 'visible';
}
if (Valueit == '') {
document.getElementById(id + 'IMG').style.visibility = 'hidden';
document.getElementById('secondstep').style.visibility = 'visible';
}
}
setInterval(testallthetime(),1);
}
}
Note: first part of JS regarding the select is working correctly as it should, I just can't get the empty text field to stop the green tick from showing.
注意：关于选择的 JS 的第一部分正常工作，我只是无法获得空文本字段来阻止绿色勾号显示。
e.g. when you enter anything in the box, the green tick comes in, so far so good. but if you delete everything you typed and you're left with nothing, the tick is still there, UNLESS you push backspace or del one more time. How can I make this in actual real time for it to detect it and when nothing is there not show the green tick? and vice versa. Any help is appreciated.
例如，当您在框中输入任何内容时，绿色勾号出现，到目前为止一切顺利。但是如果你删除了你输入的所有内容而你什么都没有留下，那么勾号仍然存在，除非你再按一次退格或删除。我怎样才能实时进行它来检测它，并且当没有任何东西时不显示绿色勾号？反之亦然。任何帮助表示赞赏。
回答by Travis J
There are a few things going on here. First, do not use a timer to check for input changes, it is really bad practice. It is harsh on the user's computer and too much of it will jar the user experience.
这里发生了一些事情。首先，不要使用计时器来检查输入的变化，这真的是不好的做法。它对用户的计算机很苛刻，太多会影响用户体验。
Further, it is best practice to use unobtrusive javascript. This means factoring out your event handlers into the code instead of on the elements. In order to do that, you are going to want to wait for the page to load (inside of a window.load event will work).
此外，最好的做法是使用不显眼的 javascript。这意味着将您的事件处理程序分解到代码中而不是元素中。为了做到这一点，您需要等待页面加载（在 window.load 事件内会起作用）。
To recap, use oninputto check for changes, remove the timer, use unobtrusive javascript inside of an onloadevent, and you should be good. Here is how it should look:
回顾一下，用于oninput检查更改、删除计时器、在onload事件中使用不显眼的 javascript ，你应该很好。这是它的外观：
//onload event
window.onload = function(){
//get elements
var typeselect = document.getElementById("typeselect");
var typeImg = document.getElementById('typeselectIMG');
var secondstep = document.getElementById("secondstep");
var quantInput = document.getElementById("quantity");
var quantImg = document.getElementById("quantityIMG");
//select event
typeselect.onchange = function(){
if( this.value != 'off' ){
typeImg.style.visibility = 'visible';
secondstep.style.visibility = 'visible';
}else{
typeImg.style.visibility = 'hidden';
quantImg.style.visibility = 'hidden';
secondstep.style.visibility = 'hidden';
}
};
//input changed event
quantInput.oninput = function(){
if(this.value != ''){
quantImg.style.visibility = 'visible';
}else{
quantImg.style.visibility = 'hidden';
}
};
};
回答by Nick Retallack
Wrap the body of check() in a call to setTimeout. The event handler fires before the new value of the field is available, allowing you to prevent it from being applied. Calling setTimeout schedules your code to execute a moment later, when the value is available.
将 check() 的主体包装在对 setTimeout 的调用中。事件处理程序在字段的新值可用之前触发，允许您阻止它被应用。调用 setTimeout 安排您的代码稍后执行，当值可用时。
There is no need for the setInterval later on, calling testallthetime. You set Valueit in the outer scope and it's not going to change no matter how many times you check it.
稍后不需要 setInterval，调用 testallthetime。您将 Valueit 设置在外部范围内，无论您检查多少次它都不会改变。
