麻烦老师看下是否正确，谢谢老师
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.header {
background: #778899;
}
.header__wrap {
width: 1200px;
height: 60px;
margin: 0 auto;
}
.header__title {
height: 60px;
color: #fffaf0;
font-size: 30px;
line-height: 60px;
}
.sign_up {
background: #fffff0;
}
.sign_up__wrap {
width: 1200px;
height: 1000px;
margin: 0 auto;
padding-top: 80px;
}
.sign_up__form {
width: 254px;
margin: 0 auto;
}
.sign_up__input {
width: 250px;
height: 35px;
display: block;
margin-bottom: 15px;
}
label {
margin-bottom: 0.5rem;
display: inline-block;
font-size: 10px;
color: lightslategrey;
}
.sign_up__div {
font-size: 10px;
font-weight: bold;
margin-bottom: 10px;
}
.sign_up__btn {
display: block;
width: 250px;
height: 35px;
font-size: 20px;
text-align: center;
line-height: 35px;
margin: 0 auto;
border: 1px solid #778899;
border-radius: 4px;
}
.sign_up__btn:hover {
cursor: pointer;
}
</style>
<body>
<header class="header">
<div class="header__wrap">
<div class="header__title">用户注册</div>
</div>
</header>
<div class="sign_up">
<div class="sign_up__wrap">
<form action="" method="post" class="sign_up__form">
<div class="sign_up__username_div sign_up__div">
<label for="username">用户名</label>
<input type="text" class="sign_up__input sign_up__username" id="username">
</div>
<div class="sign_up__pwd_div sign_up__div">
<label for="pwd">登陆密码</label>
<input type="password" class="sign_up__input sign_up__pwd" id="pwd">
</div>
<div class="sign_up__confirmPwd_div sign_up__div">
<label for="confirmPwd">确认密码</label>
<input type="password" class="sign_up__input sign_up__confirm_pwd" id="confirmPwd">
</div>
<div class="sign_up__realName_div sign_up__div">
<label for="realName">姓名</label>
<input type="text" class="sign_up__input sign_up__real_name" id="realName">
</div>
<label for="sex">性别</label>
<select name="sex" id="sex" class="sign_up__input">
<option value="male">男</option>
<option value="female">女</option>
</select>
<div class="sign_up__idNum_div sign_up__div">
<label for="idNum">身份证号码</label>
<input type="text" class="sign_up__input sign_up__idNum" id="idNum">
</div>
<div class="sign_up__email_div sign_up__div">
<label for="email">邮箱</label>
<input type="email" class="sign_up__input sign_up__email" id="email">
</div>
<div class="sign_up__phone_div sign_up__div">
<label for="phone">手机号码</label>
<input type="text" class="sign_up__input sign_up__phone" id="phone">
</div>
<input type="button" value="提交" class="sign_up__btn">
</form>
</div>
</div>
<script>
// 获取元素
function getElem(selector) {
return document.querySelector(selector);
}
// 处理提示信息
function addMessage(elem, selector, message, regex) {
if (getElem("." + selector + "__message") === null) {
formElem[elem].style.marginBottom = "5px";
let div = document.createElement("div");
div.className = selector + "__message" + " sign_up__message";
getElem("." + selector).appendChild(div);
}
if (regex.test(formElem[elem].value)) {
getElem("." + selector + "__message").innerHTML = "ok";
getElem("." + selector + "__message").style.color = "green";
} else {
getElem("." + selector + "__message").innerHTML = message;
getElem("." + selector + "__message").style.color = "red";
}
}
let formElem = {
username: getElem("#username"),
pwd: getElem("#pwd"),
confirmPwd: getElem("#confirmPwd"),
realName: getElem("#realName"),
idNum: getElem("#idNum"),
email: getElem("#email"),
phone: getElem("#phone"),
btn: getElem(".sign_up__btn")
};
getElem(".sign_up__form").addEventListener("input", function (event) {
switch (event.target.id) {
case "username":
addMessage("username", "sign_up__username_div", "用户名必须以字母开头，6-20位，可以包含数字、下划线", /^[a-zA-Z][\w]{5,19}$/);
break;
case "pwd":
addMessage("pwd", "sign_up__pwd_div", "密码长度为6-16位，不能包含空白字符", /^[\w!@#$%^&*~\-+=.,]{6,16}$/);
break;
case "confirmPwd":
addMessage("confirmPwd", "sign_up__confirmPwd_div", "密码不一致", new RegExp(formElem.pwd.value));
break;
case "realName":
addMessage("realName", "sign_up__realName_div", "真实姓名由2-4位中文汉字组成", /^[\u4e00-\u9fa5]{2,4}$/);
break;
case "idNum":
addMessage("idNum", "sign_up__idNum_div", "身份证号码有误", /^[1-9][0-9]{14}$|^[1-9][0-9]{16}([0-9]|[xX])$/);
break;
case "email":
addMessage("email", "sign_up__email_div", "邮箱输入有误", /^[a-zA-Z0-9]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/);
break;
case "phone":
addMessage("phone", "sign_up__phone_div", "手机号输入不正确", /^1[3456789]\d{9}$/);
}
});
formElem.btn.onclick = function () {
for (let i of document.getElementsByClassName("sign_up__message")) {
if(i.innerHTML !== "ok") {
alert("信息输入有误，请重新输入");
return;
}
}
alert("验证成功")
}
</script>
</body>
</html>0
收起
正在回答 回答被采纳积分+1
2回答
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星