<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<link rel="stylesheet" href="bmi.css">
<style>
#middle div{
600px;margin: 15px auto;
}
#middle div label {
display: inline-block; 80px;text-align: right;padding-right: 10px;
}
#middle div input[type=text], #middle div input[type=password] {
300px;border-radius: 3px;height:40px;border:1px solid green;padding:0 15px;
}
#middle div input[type=button] {
200px;border-radius: 3px;height:40px;border:1px solid orange;background-color: purple;font-size: 20px;color:white;
}
.err {
color:red;font-size: 12px;
}
p {
color:cyan;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="middle">
<div>
<label for="">用户:</label>
<input type="text" placeholder="请输入用户" id="user">
<span id="userErr" class="err"></span>
</div>
<div>
<label for="">密码:</label>
<input type="password" placeholder="请输入密码" id="pwd">
<span id="pwdErr" class="err"></span>
</div>
<div>
<label for="">确认密码:</label>
<input type="password" placeholder="请确认密码" id="repwd">
<span id="repwdErr" class="err"></span>
</div>
<div>
<label for="">身份证:</label>
<input type="text" placeholder="请输入身份证" id="id">
<span id="idErr" class="err"></span>
</div>
<div>
<label for="">签名:</label>
<input type="text" placeholder="请输入签名" id="show">
<span id="showErr" class="err"></span>
</div>
<div>
<label for=""></label>
<input type="button" value="注册" id="commit">
</div>
<div>
<label for=""></label>
<input type="button" value="显示所有用户信息" id="print">
</div>
<div id="info"></div>
</div>
<div id="foot"></div>
</body>
<script src="bmi.js"></script>
<!-- js的代码必须写在 script 标签的内部 -->
<script>
// 获取按钮，绑定点击事件
var btn = document.getElementById("commit");
var printBtn = document.getElementById("print");
// 这是一个空数组，用来存放所有的用户数据
var allUsers = [];
btn.onclick = function (){
// user
var user = document.getElementById("user").value;
var pwd = document.getElementById("pwd").value;
var repwd = document.getElementById("repwd").value;
var id = document.getElementById("id").value;
var show = document.getElementById("show").value;
// isCheck 用来判断用户输入的所有信息是否正确
var isCheck = true;
// 验证
var userErr = document.getElementById("userErr");
if (user.length == 0 || user.length > 20) {
// alert("用户名长度无效");
// innerHTML是文档对象（标签或者元素）的一个属性，可以 访问 闭合标签的内容
userErr.innerHTML = "用户名长度无效";
isCheck = false;
} else {
userErr.innerHTML = "";
}
if (pwd != repwd) {
// alert("两次密码不一致");
var pwdErr = document.getElementById("pwdErr");
pwdErr.innerHTML = "两次密码不一致";
isCheck = false;
}
if (id.length != 18) {
// alert("身份证无效");
var idErr = document.getElementById("idErr");
idErr.innerHTML = "身份证无效";
isCheck = false;
}
if (show.indexOf("QY") >= 0) {
// alert("签名包含敏感词");
var showErr = document.getElementById("showErr");
showErr.innerHTML = "签名包含敏感词";
isCheck = false;
}
// 用户数据入库 ？？？？？
if (isCheck) {
//录入
// 方式1
// var person = {
// username:user,
// password:pwd,
// ID:id,
// show:show
// }
// 方式2
var person = {};
person.username = user;
person.password = pwd;
person.ID = id;
person.show = show;
// person.birth = id.substr(6,8);
person.birth = id.substring(6,14);
// 将用户数据放入数组
allUsers.push(person);
} else {
alert("请检查您输入的信息是否正确!");
}
}
printBtn.onclick = function (){
var info = document.getElementById("info");
var html = "";
for (var i = 0; i < allUsers.length; i++) {
// console.log("第"+(i+1)+"个用户信息:");
// console.log(">>>>> 用户名:"+allUsers[i].username);
// console.log(">>>>> 密码:"+allUsers[i].password);
// console.log(">>>>> 身份证:"+allUsers[i].ID);
// console.log(">>>>> 签名:"+allUsers[i].show);
// console.log(">>>>> 生日:"+allUsers[i].birth);
html += "<p>";
html += "第"+(i+1)+"个用户信息:";
html += ">>>>> 用户名:"+allUsers[i].username;
html += ">>>>> 密码:"+allUsers[i].password;
html += ">>>>> 身份证:"+allUsers[i].ID;
html += ">>>>> 签名:"+allUsers[i].show;
html += ">>>>> 生日:"+allUsers[i].birth;
html += "</p>";
}
info.innerHTML = html;
}
</script>
</html>