Question

我想在用户填写正确的输入旁边放绿色标记

这是我如何设置所有内容：

<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>

和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);

                }
        }

注意：关于select的JS的第一部分正常工作，我只是无法获取空文本字段以阻止显示绿色标记。

e.g。当您在框中输入任何内容时，绿色勾号会出现，到目前为止一切都很好。但是如果你删除你输入的所有内容而你没有任何东西，那么勾号仍然存在，除非你再次推迟退格或del。我怎样才能在实时实时检测它，什么时候没有显示绿色勾？反之亦然。任何帮助表示赞赏。

http://jsfiddle.net/ZQQS9/2/

Answer 1

的 jsFiddle Demo 的

这里有一些事情发生。首先，不要使用计时器来检查输入变化，这是非常糟糕的做法。它对用户的计算机来说很苛刻，太多会影响用户体验。

此外，最佳做法是使用不引人注目的javascript。这意味着将事件处理程序分解为代码而不是元素。为了做到这一点，你将要等待页面加载（在window.load事件内部将起作用）。

总结一下，使用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'; } }; };

Answer 2

在调用setTimeout时包装check（）的主体。事件处理程序在字段的新值可用之前触发，允许您阻止应用它。调用setTimeout会调度您的代码，以便在值可用时执行。

稍后不需要setInterval，调用testallthetime。你可以在外部范围内设置Valueit，无论你检查多少次都不会改变它。

如何使用Javascript实时验证表单

2 个答案: