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

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日