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

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 在不同的执行界面调用同一个页面
  • ¥20 基于51单片机的数字频率计
  • ¥50 M3T长焦相机如何标定以及正射影像拼接问题
  • ¥15 keepalived的虚拟VIP地址 ping -s 发包测试,只能通过1472字节以下的数据包(相关搜索:静态路由)
  • ¥20 关于#stm32#的问题:STM32串口发送问题,偶校验(even),发送5A 41 FB 20.烧录程序后发现串口助手读到的是5A 41 7B A0
  • ¥15 C++map释放不掉
  • ¥15 Mabatis查询数据
  • ¥15 想知道lingo目标函数中求和公式上标是变量情况如何求解
  • ¥15 关于E22-400T22S的LORA模块的通信问题
  • ¥15 求用二阶有源低通滤波将3khz方波转为正弦波的电路