JS的一个循环，红色这句不会写了。。。

晕，红色字体怎么标记不出来，系统把颜色标记的代码嵌进去了document.getElementById().innerHTML="不能为空"
document.getElementById().innerHTML="填写正确"就是这两句

<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.getElementsByTagName("input");
        var oSpan = oForm.getElementsByTagName("span");
        for (var i = 0; i < oInput.length; i++) {
            if (oInput[i].value == "") {
                (function (i) {
                    oInput[i].onblur = function () {
                        oSpan[i].innerHTML = "不能为空";
                    }
                })(i);
            }
            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>

类似这样的document.getElementById("").innerHTML="<font color='red'>不能为空</font>"

上面还有个没弄。。以这个为准吧<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.getElementsByTagName("input");
        var oSpan = oForm.getElementsByTagName("span");
        for (var i = 0; i < oInput.length; i++) {
            if (oInput[i].value == "") {
                oInput[i].onblur = function () {
                    this.nextSibling.innerHTML = "不能为空";
                }
            }
            else {
                oInput[i].nextSibling.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>

注意input后面不要跟空格，不然获取他的下一个兄弟节点会为空节点。要不你就写个获取下一个兄弟节点的方法来过滤

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>无标题文档</title>
</head>

<body>
<form id="zhuce" action="#" method="post">
<input type="text" onBlur="checkForm(0)" /><span></span><br />
<input type="text" onBlur="checkForm(1)" /><span></span><br />
<input type="text" onBlur="checkForm(2)" /><span></span><br />
<input type="text" onBlur="checkForm(3)" /><span></span><br />
<input type="text" onBlur="checkForm(4)" /><span></span><br />
<input type="text" onBlur="checkForm(5)" /><span></span><br />
</form>
<script type="text/javascript">
var oForm = document.getElementById("zhuce"),
oInput = oForm.getElementsByTagName("input"),
oSpan = oForm.getElementsByTagName("span"); function checkForm(n){
var Val = oInput[n].value;
if( Val=="" || Val==null ){
oSpan[n].innerHTML = "不能为空"
}else oSpan[n].innerHTML = "填写正确";
}
</script></body>
</html>

这个成功了原来还要在里面再加一个if和else。。才行。
oInput[i].value=="" 和 this.value==""这两个有啥区别吗？

这个成功了原来还要在里面再加一个if和else。。才行。
oInput[i].value=="" 和 this.value==""这两个有啥区别吗？
oInput[i]是数组对象，onblur事件里的this指向事件触发的input对象

这个成功了原来还要在里面再加一个if和else。。才行。
oInput[i].value=="" 和 this.value==""这两个有啥区别吗？
oInput[i]是数组对象，onblur事件里的this指向事件触发的input对象
外面的else可以去掉了

会用闭包的话,闭包处理好了直接写就可以了
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;//绑定事件
    }
}

调试易

JS的一个循环，红色这句不会写了。。。

解决方案 »