程序优化和调试太费时间了。麻烦老师帮忙看下还有什么可以优化的地方。
来源：4-8 编程练习
鲸落2020
2020-11-25 16:14:58
<style>
*{margin: 0;
padding: 0;}
#main{width: 1000px;
height: 600px;
margin: 20px auto;
font-size: 22px;}
#main .title{height: 34px;
line-height: 34px;
text-indent: 20px;
color: #ffffff;
background-color: blue;
font-size:24px;
padding: 10px 0;}
#box{ height: 520px;
padding: 30px 0 0 0;
text-align: center;
background-color:#555555;}
.box span{display:inline-block;
width: 200px;
text-align: right;}
.box .sex{width:173px;
height: 26px;
}
input{height: 22px;}
div:nth-last-child(n){padding: 9px 0;}
.box .tip {display: inline-block;
font-size:10px;
text-align: left;
color:red;}
.button{margin: 30px 0 0 -80px;
width: 60px;
height: 40px;
font-size: 25px;
border-radius: 8px;
background-color: #5880f9;
border: 1px solid; }
</style>
</head>
<body>
<div id="main">
<h3 class="title">用户注册</h3>
<div id="box" class="box">
<div><span>用户名：</span>
<input type="text" id="User"/>
<span class="tip"></span>
</div>
<div><span>登录密码：</span>
<input type="text" id="Password"/>
<span class="tip"></span>
</div>
<div><span>确认密码：</span>
<input type="text" id="Password2"/>
<span class="tip"></span>
</div>
<div><span>姓名：</span>
<input type="text" id="Myname"/>
<span class="tip"></span>
</div>
<div><span>性别：</span>
<select id="Sex" class="sex">
<option value="men">男</option>
<option value="women">女</option>
</select>
<span class="tip"></span>
</div>
<div><span>身份证号码：</span>
<input type="text" id="IdNumber"/>
<span class="tip"></span></div>
<div><span>邮箱：</span>
<input type="text" id="Mailbox"/>
<span class="tip"></span>
</div>
<div><span>手机号：</span>
<input type="text" id="PhoeNumber"/>
<span class="tip"></span>
</div>
<input type="button" value="提交" id="button" class="button"/>
</div>
</div>
<script type="text/javascript">
//获取input元素
var User = document.getElementById("User"),
Password = document.getElementById("Password"),
Password2 = document.getElementById("Password2"),
Myname = document.getElementById("Myname"),
IdNumber = document.getElementById("IdNumber"),
Mailbox = document.getElementById("Mailbox"),
PhoeNumber = document.getElementById("PhoeNumber"),
button = document.getElementById("button"),
tips = document.getElementsByClassName("tip");
//设置所有文本框的值为false;
var AllGet = {AllUser: "", //用户名
AllPassword: "", //登录密码
AllPassword2: "", //确认密码
AllMyname: "", //姓名
AllIdNumber: "", //身份证
AllMailbox : "", //邮箱号
AllPhoeNumber : "",}; //手机号
//验证用户名要求用户名是6-20位字母、数字或“_”,字母开头。
User.onblur = function(){
var pattern = /^[a-zA-Z]\w{5,19}$/;
if( pattern.test(this.value)){
tips[0].innerHTML = "OK";
AllGet.AllUser = "1";
}else{
AllGet.AllUser = "6-20位字母、数字或“_”,字母开头";
tips[0].innerHTML = AllGet.AllUser;
}
};
//要求密码6-18位，包括数字字母或符号，中间不能有空格
Password.onblur = function(){
var pattern = /^\S{6,18}$/;
if( pattern.test(this.value)){
tips[1].innerHTML = "OK";
AllGet.AllPassword = "1";
}else{
AllGet.AllPassword = "密码6-18位，包括数字字母或符号，中间不能有空格";
tips[1].innerHTML = AllGet.AllPassword;
}
};
//密码确认
Password2.onblur = function(){
if( this.value == Password.value && this.value != ""){
tips[2].innerHTML = "OK";
AllGet.AllPassword2 = "1";
}else{
AllGet.AllPassword2 = "两次密码不一致";
tips[2].innerHTML = AllGet.AllPassword2;
}
};
//姓名请输入真实姓名，两位到四位的中文汉字
Myname.onblur = function(){
var pattern = /^[\u4e00-\u9fa5]{2,4}$/;
if( pattern.test(this.value)){
tips[3].innerHTML = "OK";
AllGet.AllMyname = "1";
}else{
AllGet.AllMyname = "请输入真实姓名，两位到四位的中文汉字";
tips[3].innerHTML = AllGet.AllMyname;
}
};
//身份证15位或者18位的数字，18位时最后一位可能是x
IdNumber.onblur = function(){
var pattern = /^[1-9]{1}\d{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/;
if( pattern.test(this.value)){
tips[5].innerHTML = "OK";
AllGet.AllIdNumber = "1";
}else{
AllGet.AllIdNumber = "身份证号15位或者18位的数字，18位时最后一位可能是x";
tips[5].innerHTML = AllGet.AllIdNumber;
}
};
//邮箱填写
Mailbox.onblur = function(){
var pattern = /^[\w]+@[\w]+\.com(?:\.cn)?$/;
if( pattern.test(this.value)){
tips[6].innerHTML = "OK";
AllGet.AllMailbox = "1";
}else{
AllGet.AllMailbox = "输入正确的邮箱地址格式";
tips[6].innerHTML = AllGet.AllMailbox;
}
};
//手机号码
PhoeNumber.onblur = function(){
var pattern = /^(13)\d{9}$|^(147)\d{8}$|^(15)[^4]+\d{8}$|^(18)[^134]+\d{8}$/;
if( pattern.test(this.value)){
tips[7].innerHTML = "OK";
AllGet.AllPhoeNumber = "1";
}else{
AllGet.AllPhoeNumber = "手机号码不正确";
tips[7].innerHTML = AllGet.AllPhoeNumber;
}
};
//提交按钮
button.onclick = function(){
var sum = 0;
for(var i in AllGet){
if(AllGet[i] == 1){
sum+=1;
if(sum == 7){
console.log("恭喜验证成功");}
}else{
console.log(AllGet[i]);
continue;
}
}
}
</script>
</body>
1回答
-
好帮手慕夭夭
2020-11-25
同学你好，代码做的很棒了，正则写的不错，没有复杂的地方，不用优化了哦。另外，代码比较多的时候，优化和调试是比较消耗时间，这个很正常，放好心态，自信一点，继续加油！！！
祝学习愉快~
0
相似问题