老师这么简单的编程练习，为什么我会写出这么多代码？怎么精简一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
background-color: #eeeeee;
}
.wrap h1 {
background-color: #3092D1;
color: white;
font-weight: normal;
font-size: 16px;
padding: 10px 20px;
}
.wrap .form-wrap {
width: 80%;
margin: 50px auto auto;
font-size: 16px;
line-height: 2em;
}
.wrap .form-wrap span {
padding: 10px;
}
.wrap .form-wrap span.left {
display: inline-block;
width: 35%;
text-align: right;
}
.wrap .form-wrap input,
.wrap .form-wrap select {
width: 200px;
box-sizing: border-box;
background-color: white;
/* border-style:solid; */
}
/* 不知道input框多了什么 */
.wrap .form-wrap select {
margin-right: 5px;
}
.wrap .form-wrap .button {
width: 80px;
height: 40px;
margin-top: 3px;
margin-left: 40%;
background-color: #2475B9;
border-radius: 5px;
color: white;
}
</style>
</head>
<body>
<section id="wrap" class="wrap">
<!-- 标题 -->
<h1>用户注册</h1>
<!-- form容器 -->
<div class="form-wrap">
<!-- 提交表单 -->
<form action="#" id="mainForm">
<span class="left">用户名：</span>
<input type="text" name="userName" id="userName">
<span></span><br>
<span class="left">登录密码：</span>
<input type="password" name="password" id="password">
<span></span><br>
<span class="left">确认密码：</span>
<input type="password" name="passwordConfirm" id="passwordConfirm">
<span></span><br>
<span class="left">姓名：</span>
<input type="text" name="name" id="name">
<span></span><br>
<span class="left">性别：</span>
<select name="sex" id="sex">
<option value="">--请选择--</option>
<option value="male">男</option>
<option value="female">女</option>
</select><span></span><br>
<span class="left">身份证号码：</span>
<input type="text" name="identityCard" id="identityCard">
<span></span><br>
<span class="left">邮箱：</span>
<input type="text" name="email" id="email">
<span></span><br>
<span class="left">手机号码：</span>
<input type="text" name="phone" id="phone">
<span></span><br>
<input type="button" class="button" id="button" value="提交" name="button">
</form>
</div>
</div>
</section>
<script>
// 获取dom元素
var form = {
userName: document.querySelector("#userName"),
password: document.querySelector("#password"),
passwordConfirm: document.querySelector("#passwordConfirm"),
name: document.querySelector("#name"),
sex: document.querySelector("#sex"),
identityCard: document.querySelector("#identityCard"),
email: document.querySelector("#email"),
phone: document.querySelector("#phone"),
}
// 标志位，全部为true才允许提交
var flag = {
userName: false,
password: false,
passwordConfirm: false,
name: false,
sex: false,
identityCard: false,
email: false,
phone: false
};
var button = document.querySelector("#button");
var mainForm = document.querySelector("#mainForm");
// 正则匹配
var patterns = {
userName: /^[A-z]\w{5,19}$/,
password: /^\S{6,18}$/,
passwordConfirm: /^\S{6,18}$/,
name: /^[\u4a00-\u9fa5]{2,4}$/,
sex: /^(?:male|female)$/,
identityCard: /^\d{15}$|^\d{17}[\dxX]$/,
email: /^\w+@\w+\.com(\.cn)?$/,
phone: /^(15[0-35-9]|13\d|18[025-9]|147)\d{8}$/
}
// 这是提示内容
var tips = {
userName: '<span style="color:red">用户名是6-20位字母、数字或“_”,字母开头<span>',
password: '<span style="color:red">密码6-18位，包括数字字母或符号，中间不能有空格<span>',
passwordConfirm: '<span style="color:red">两次密码不一致<span>',
name: '<span style="color:red">两位到四位的中文汉字<span>',
sex: '<span style="color:red">未选择性别<span>',
identityCard: '<span style="color:red">15位或者18位的数字，18位时最后一位可能是x<span>',
email: '<span style="color:red">邮箱格式不正确<span>',
phone: '<span style="color:red">手机号格式不正确<span>',
ok: '<span style="color:green">OK<span>'
}
// 绑定事件
for (let elem in form) {
form[elem].onblur = inspect;
}
// 正则匹配判断
function inspect() {
if (patterns[this.name].test(this.value)) {
if (this.name == 'passwordConfirm') {
if (this.name == 'passwordConfirm') {
flag[this.name] = true;
this.nextElementSibling.outerHTML = tips['ok'];
} else {
flag[this.name] = false;
this.nextElementSibling.outerHTML = tips[this.name];
}
}
else {
flag[this.name] = true;
this.nextElementSibling.outerHTML = tips['ok'];
}
} else {
flag[this.name] = false;
this.nextElementSibling.outerHTML = tips[this.name];
}
};
// 提交确认
function confirm() {
for (let elem in form) {
form[elem].onblur();
}
for (let elem in flag) {
if (flag[elem] != true) {
console.log(elem);
return;
}
}
console.log("成功提交");
mainForm.submit();
}
// 绑定提交事件
button.onclick = confirm;
</script>
</body>
</html>
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星