如何使用 Java 脚本实时验证表单

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