星陨 落月 2022-05-24 12:41 采纳率: 88.5%
浏览 23
已结题

HTML DOM nextSibling 属性未定义问题

我在练习正则表达式的验证信息的时候,控制台一直显示nextSibling未定义,但我找不到原因。
<table id="regs">
      <tr><th>用户名称:</th><!--<th>表示"表头"--><!-- <tr>表示行 -->
          <td><!--<td>表示列-->
        <input name="userid" type="text" placeholder="长度4-12,英文大小写字母">
          </td>
          <td><div></div></td><!--提示行-->
      </tr>

      <tr><th>密     码:</th>
      <td>
          <input name="pass" type="password" placeholder="长度6-20,包含大小写字母,数字或下划线">
      </td>
          <td><div></div></td>
      </tr>

      <tr><th>确认密码:</th>
          <td>
              <input name="agpass" type="password" placeholder="请再次输入密码进行确认">
          </td>
          <td><div></div></td>
      </tr>

      <tr><th>手机号码:</th>
      <td>
          <input name="phone" type="text" placeholder="13、14、15、16、17、18开头的11位手机号">
      </td>
          <td><div></div></td>
      </tr>

      <tr><th>电子邮箱:</th>
      <td>
          <input name="email" type="email" placeholder="用户名@域名(域名后缀至少2个字符)">
      </td>
          <td><div></div></td>
      </tr>

      <tr><td colspan="3" align="center"><input type="submit" value="注册" ></td></tr><!--colspan:-->
  </table>

<script>
    var inputs = document.getElementsByTagName('input');//.getElementsByTagName:获取带有指定标签名的对象集合。集合位数组类型

    for(var i = 0;i<inputs.length;i++)
    {
        inputs[i].onblur = inputon();
    }

    function inputon() {
        var name = this.name;   //获取name信息

        var val = this.value;   //获取输入的内容

        var tips = this.placeholder;

--!!-- var tips_obj = this.parentNode.nextSibling.firstChild;//获取tips下的提示信息,并由tips_obj依次接收
        /*
        parentNode:节点(元素)的父节点
        nextSibling:属性可返回某个元素之后紧跟的元素(处于同一树层级中)。语法:node.nextSibling  如果元素紧跟后面没有元素则返回 null。
        firstChild:属性返回被选节点的第一个子节点。 语法:node.firstChild  如果选定的节点没有子节点,则该属性返回 NULL。
         */
        val = val.trim();//trim():方法用于删除字符串的头尾空白符。

        if (!val) {
            error(tips_obj, '输入框不能为空');
            return false;
        }
</script>


img

  • 写回答

1条回答 默认 最新

  • Heerey525 前端领域新星创作者 2022-05-24 13:23
    关注

    有一些错误,我改了下

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <table id="regs">
          <tr>
            <th>用户名称:</th>
            <!--<th>表示"表头"--><!-- <tr>表示行 -->
            <td>
              <!--<td>表示列-->
              <input
                name="userid"
                type="text"
                placeholder="长度4-12,英文大小写字母"
              />
            </td>
            <td><div></div></td>
            <!--提示行-->
          </tr>
    
          <tr>
            <th>密 码:</th>
            <td>
              <input
                name="pass"
                type="password"
                placeholder="长度6-20,包含大小写字母,数字或下划线"
              />
            </td>
            <td><div></div></td>
          </tr>
    
          <tr>
            <th>确认密码:</th>
            <td>
              <input
                name="agpass"
                type="password"
                placeholder="请再次输入密码进行确认"
              />
            </td>
            <td><div></div></td>
          </tr>
    
          <tr>
            <th>手机号码:</th>
            <td>
              <input
                name="phone"
                type="text"
                placeholder="13、14、15、16、17、18开头的11位手机号"
              />
            </td>
            <td><div></div></td>
          </tr>
    
          <tr>
            <th>电子邮箱:</th>
            <td>
              <input
                name="email"
                type="email"
                placeholder="用户名@域名(域名后缀至少2个字符)"
              />
            </td>
            <td><div></div></td>
          </tr>
    
          <tr>
            <td colspan="3" align="center">
              <input type="submit" onclick="submit()" value="注册" />
            </td>
          </tr>
          <!--colspan:-->
        </table>
    
        <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/button -->
        <script>
          function submit() {
            var inputs = document.getElementsByTagName("input"); //.getElementsByTagName:获取带有指定标签名的对象集合。集合位数组类型
    
            for (var i = 0; i < inputs.length; i++) {
              inputs[i].onblur = inputon(inputs[i]);
            }
    
            function inputon(e) {
              var name = e.name; //获取name信息
    
              var val = e.value; //获取输入的内容
    
              var tips = e.placeholder;
              // console.log('e.parentNode', e.parentNode)
              var tips_obj = e.parentNode.nextSibling.firstChild; //获取tips下的提示信息,并由tips_obj依次接收
              /*
                  parentNode:节点(元素)的父节点
                  nextSibling:属性可返回某个元素之后紧跟的元素(处于同一树层级中)。语法:node.nextSibling  如果元素紧跟后面没有元素则返回 null。
                  firstChild:属性返回被选节点的第一个子节点。 语法:node.firstChild  如果选定的节点没有子节点,则该属性返回 NULL。
                   */
              val = val.trim(); //trim():方法用于删除字符串的头尾空白符。
    
              if (!val) {
                console.error(tips_obj, "输入框不能为空");
                return false;
              }
            }
          }
        </script>
      </body>
    </html>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 6月1日
  • 已采纳回答 5月24日
  • 修改了问题 5月24日
  • 创建了问题 5月24日

悬赏问题

  • ¥15 metadata提取的PDF元数据,如何转换为一个Excel
  • ¥15 关于arduino编程toCharArray()函数的使用
  • ¥100 vc++混合CEF采用CLR方式编译报错
  • ¥15 coze 的插件输入飞书多维表格 app_token 后一直显示错误,如何解决?
  • ¥15 vite+vue3+plyr播放本地public文件夹下视频无法加载
  • ¥15 c#逐行读取txt文本,但是每一行里面数据之间空格数量不同
  • ¥50 如何openEuler 22.03上安装配置drbd
  • ¥20 ING91680C BLE5.3 芯片怎么实现串口收发数据
  • ¥15 无线连接树莓派,无法执行update,如何解决?(相关搜索:软件下载)
  • ¥15 Windows11, backspace, enter, space键失灵