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

本文链接：https://blog.csdn.net/smiple9102/article/details/62228534

本文介绍了使用JavaScript进行表单验证的方法，包括如何利用onkeyup事件实时检查输入内容的合法性，并通过nextSibling和nextElementSibling获取并更新相邻元素的内容以显示验证结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 />
密&nbsp&nbsp码：<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>