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>
有一些错误，我改了下
<!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>