javascript - 如何使用 Javascript 实时验证表单

Question

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

我想在用户填写正确输入的旁边打上绿色勾号

这是我设置所有内容的方式:

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

                }
        }

注意:关于选择的 JS 的第一部分正常工作，我只是无法让空文本字段停止显示绿色对勾。

例如当您在框中输入任何内容时，绿色勾号出现，到目前为止一切顺利。但是如果你删除了你输入的所有内容并且你什么都没有留下，那么勾号仍然存在，除非你再次按下退格键或删除键。我怎样才能真正实时地让它检测到它并且当什么都没有时不显示绿色勾号？反之亦然。感谢您的帮助。

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';
    }
  };
};