dom03表单验证及nextElementSibling进行兼容性处理

day03-17笔记小结:
表单验证nextSibling
兄弟节点:nextSibling获取到的下一个节点有可能是空节点,所以可以用获取下一个兄弟元素来解决nextElementSibling(下一个兄弟元素,但是ie6不兼容)
onkeyup 键盘弹起事件 onkeydown键盘按下事件
对nextElementSibling进行兼容性处理

<body>
17表单验证nextSibling<br />
兄弟节点:nextSibling获取到的下一个节点有可能是空节点,所以可以用获取下一个兄弟元素来解决nextElementSibling(下一个兄弟元素,但是ie6不兼容)<br />
用户名:<input type="text" id="txtName" /><span>span><br />
密  码:<input type="text" id="txtPwd" /> 
<span>span><br />
<input type="button" id="btn" value="注册" /><span>span>
<script>
    //需求:用户在文本框中输入内容的时候 判断用户名是否符合要求
    var txtName=document.getElementById('txtName');
    //onkeyup 键盘弹起事件 onkeydown键盘按下事件
    txtName.onkeyup =function () {
        if (this.value.length < 3 || this.value.length > 6) {
            //兄弟节点:nextSibling下一个兄弟,控制的是里边的文本innerText
            //innerText有兼容性
            this.nextSibling.innerText="用户名必须是3-6位之间";

        }else{
            this.nextSibling.innerText="";

        };
    }
    txtPwd.onkeyup =function () {
        if (this.value.length < 3 || this.value.length > 6) {
            //兄弟节点:nextSibling下一个兄弟,控制的是里边的文本innerText,innerText兼容性
            //this.nextElementSibling.innerText="用户名必须是3-6位之间";
            getNextElement(this).innerHtml="密码必须是3-6位之间";
        }else{
            //this.nextElementSibling.innerText="";
            getNextElement(this).innerHTML="";
        };
    }
    //对nextElementSibling进行兼容性处理
    //获取下一个兄弟元素getNextElemnet
    //经常用到,alt+insert创建一个js文件,把代码放入,需要时调用即可。
    function getNextElement(element){
        if (element.nextElementSibling) {
            return element.nextElementSibling;
        }else{
            var next=element.nextSibling;//下一个兄弟节点
            while(next && next.nodeType!==1){//一直往后找的条件,1有 2不是我要的
                next=next.nextSibling;//继续往后找兄弟节点
            }
            return next;
        };  
    }
script>

你可能感兴趣的:(js-dom基础课堂笔记)