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