JS的一个循环，红色这句不会写了。该怎么处理

2014-01-08

JS的一个循环，红色这句不会写了。。。本帖最后由 cross2010_0 于 2014-01-02 15:16:49 编辑html xmlnshttp

JS的一个循环，红色这句不会写了。。。
本帖最后由 cross2010_0 于 2014-01-02 15:16:49 编辑


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>无标题文档</title>
<script type="text/javascript">
  window.onload=function()
   {
     var oForm=document.getElementById("zhuce")
 var oInput=oForm.document.getElementsByTagName("input")
 var oSpan=oForm.document.getElementsByTagName("span")
   for(var i=0;i<oInput.length;i++)
     {
           if(oInput[i].value=="")
    {
  oInput[i].onblur=function()
    {
                  for(var j=0;j<oSpan.length;j++)
    {
  document.getElementById().innerHTML="不能为空"
}  
}
}
   else
    {
  document.getElementById().innerHTML="填写正确"
}
 }
   }
</script>
</head>

<body>
<form id="zhuce" action="#" method="post">
 <input type="text" /><span></span><br />
 <input type="text" /><span></span><br />
 <input type="text" /><span></span><br />
 <input type="text" /><span></span><br />
 <input type="text" /><span></span><br />
 <input type="text" /><span></span><br />
</form>
</body>
</html>

红色的这两句该怎么写可以实现当文本框为空时，在后面提示错误或者正确？JS在学习中，呵呵
[解决办法]


<script type="text/javascript">
    window.onload = function () {
        var oForm = document.getElementById("zhuce");
        var oInput = oForm.getElementsByTagName("input");
        var oSpan = oForm.getElementsByTagName("span");
        for (var i = 0; i < oInput.length; i++) {
            if (oInput[i].value == "") {
                oInput[i].onblur = function () {
                    if (this.value == "") {
                        this.nextSibling.innerHTML = "不能为空";
                    }
                    else {
                        this.nextSibling.innerHTML = "填写正确";
                    }
                }
            }
            else {
                oInput[i].nextSibling.innerHTML = "填写正确";
            }
        }
    };
</script>

[解决办法]
会用闭包的话,闭包处理好了直接写就可以了

window.onload=function(){ 
    var oForm  =   document.getElementById("zhuce"),
        oInput =   oForm.getElementsByTagName("input"), 
 
        oSpan  =   oForm.getElementsByTagName("span"),
        len    =   oInput.length;
        
    for(var i=0;i<len;i++){
        oSpan[i].innerHTML  =   oInput[i].value.length==0 
                                    ? "不能为空" 
                                    : "填写正确"; 
        
        (function (i) { 
            oInput[i].onblur = function () { 
                oSpan[i].innerHTML= this.value.length==0 ? "不能为空" : "填写正确";
            } 
        })(i);
    } 
}

不用闭包的话,就换个角度考虑下,因为你的设计中input与span是一一对应的进行绑定的,为免文本节点造成的空节点,就不考虑使用节点查找了.给input附加一个index属性来保留其索引值,然后对应的span自然就出来了

window.onload=function(){ 
    var oForm  =  document.getElementById("zhuce"),
        oInput =  oForm.getElementsByTagName("input"),
        oSpan  =  oForm.getElementsByTagName("span"),
        len    =  oInput.length,
        _set   =  function(obj1,obj2){
            obj2.innerHTML  =  obj1.value.length==0 ? "不能为空" : "填写正确";  
        },
        _blur  =   function(e){
            e  =   e 
[解决办法]
 window.event;
            var target  =   e.target 
[解决办法]
 e.srcElement;//获取到事件源
            _set(target,oSpan[target.index]);
        };
    for(var i=0;i<len;i++){
        _set(oInput[i],oSpan[i]);//输出提示
        oInput[i].index  = i; //将元素的索引值作为index属性附加至元素上
        oInput[i].onblur = _blur;//绑定事件
    } 
}

热点排行

JavaScript

JS的一个循环，红色这句不会写了。该怎么处理