请老师检查，有可以优化的地方吗？
<!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>register</title>
<style type="text/css">
/* common style */
ul{
list-style:none;
padding:0;
}
p{
margin:0;
}
.clearfix{
*zoom:1;
}
.clearfix::after{
content:"";
display:block;
clear:both;
}
/* style of form layout */
.form-wrapper{
width:1500px;
height:700px;
border:2px solid orange;
border-radius:10px;
margin:0 auto;
padding-left:50px;
}
form>ul{
width:1000px;
margin-bottom:100px;
}
form>ul>li>div{
width:400px;
/* height:50px; */
float:left;
line-height:50px;
}
/* style of form content */
.enter-info{
text-align:left;
}
.enter-info>span:first-child{
color:red;
}
.little-text{
letter-spacing:6px;
}
.enter-info>input{
width:250px;
height:30px;
border-radius:5px;
padding-left:5px;
border:1px solid grey;
}
.enter-info .warning{
display:none;
color:red;
}
/* check how strong the passwords is */
.tip-info{
color:orange;
}
.tip-info-correct{
color:green;
}
.tip-info-incorrect{
color:red;
}
.tip-info .vali{
padding:20px 0;
}
.tip-info .vali>li{
width:100px;
height:10px;
margin-right:10px;
background-color:grey;
float:left;
}
button{
width: 250px;
height: 40px;
border-radius:5px;
border:none;
color:white;
background-color:orange;
font-size:20px;
margin-left:275px;
}
button:hover{
background-color:rgb(255, 137, 2);
cursor:pointer;
}
</style>
</head>
<body>
<div class="form-wrapper">
<form action="save.php" method="post">
<ul>
<li class="clearfix user-name">
<div class="enter-info">
<span>*</span>
<span class="little-text">
用户名:
</span>
<input type="text" placeholder="用户名设置成功后不可修改" />
</div>
<div class="tip-info">
<span>
6-30位字母、数字或_， 以字母开头
</span>
</div>
</li>
<li class="clearfix pass-word">
<div class="enter-info">
<span>*</span>
登录密码：
<input type="text" placeholder="6-20位字母或数字" />
<p class="warning">
6-20位字母或数字
</p>
</div>
<div class="tip-info">
<ul class="vali clearfix">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</li>
<li class="clearfix check-pass">
<div class="enter-info">
<span>*</span>
确认密码：
<input type="text" placeholder="再次输入您的登录密码" />
</div>
<div class="tip-info"></div>
</li>
</ul>
<button type="button">
注册
</button>
</form>
</div>
</body>
</html>
<script type="text/javascript">
var rEXPname = /^[A-z]\w{5,29}$/,
/*rEXPname = /^[A-z]+\w{5,29}$/g,
为什么使用+号之后，要用全局匹配模式才能正确匹配呢？*/
rEXPpass1 = /^\d{6,20}$|^[A-Z]{6,20}$|^[a-z]{6,20}$/,
rEXPpass2 = /^[0-9a-z]{6,20}$|^[0-9A-Z]{6,20}$|^[A-Za-z]{6,20}$/,
rEXPpass3 = /^[A-z\d]{6,20}$/;
var oName = document.querySelector(".user-name .enter-info input"),
oPass= document.querySelector(".pass-word .enter-info input"),
oWarning = document.querySelector(".pass-word .enter-info .warning"),
oCheckPass= document.querySelector(".check-pass .enter-info input");
var oNameTip = document.querySelector(".user-name .tip-info"),
oPassTip = document.querySelector(".pass-word .tip-info"),
oCheckPassTip = document.querySelector(".check-pass .tip-info");
var oVali = document.querySelectorAll(".tip-info .vali li");
var c1 = false,
c2 = false,
c3 = false;
oName.onblur = function(){
if( rEXPname.test(this.value) ){
oNameTip.innerHTML = "<span>用户名输入正确</span>";
oNameTip.className = "tip-info-correct";
c1 = true;
}else{
oNameTip.innerHTML = "<span>6-30位字母、数字或_， 以字母开头</span>";
oNameTip.className = "tip-info-incorrect";
c1 = false;
}
};
oPass.onblur = function(){
if( rEXPpass1.test(this.value) ){
oVali[0].style.backgroundColor = "red";
oVali[1].style.backgroundColor = "";
oVali[2].style.backgroundColor = "";
oWarning.style.display = "none";
c2 = true;
}else if( rEXPpass2.test(this.value) ){
oVali[0].style.backgroundColor = "red";
oVali[1].style.backgroundColor = "orange";
oVali[2].style.backgroundColor = "";
oWarning.style.display = "none";
c2 = true;
}else if( rEXPpass3.test(this.value) ){
oVali[0].style.backgroundColor = "red";
oVali[1].style.backgroundColor = "orange";
oVali[2].style.backgroundColor = "green";
oWarning.style.display = "none";
c2 = true;
}
else{
oVali[0].style.backgroundColor = "";
oVali[1].style.backgroundColor = "";
oVali[2].style.backgroundColor = "";
oWarning.style.display = "block";
c2 = false;
}
};
oCheckPass.onblur = function(){
if(!this.value){
oCheckPassTip.innerHTML = "<span>输入框不能为空</span>";
oCheckPassTip.className = "tip-info-incorrect";
c3 = false;
}else if(this.value == oPass.value){
oCheckPassTip.innerHTML = "<span>两次输入一致</span>";
oCheckPassTip.className = "tip-info-correct";
c3 = true;
}else{
oCheckPassTip.innerHTML = "<span>两次密码输入不一致，请重新输入</span>";
oCheckPassTip.className = "tip-info-incorrect";
c3 = false;
}
};
var oButton = document.querySelector("button");
oButton.addEventListener("click",function(){
if(c1&&c2&&c3){
alert("信息填写正确");
}else{
alert("请填写正确的信息");
}
});
</script>
15
收起
正在回答 回答被采纳积分+1
相似问题
请老师检查。怎样优化比较好
15
0
4
老师请检查
20
0
3
对内存操作优化后, 速度更慢
19
0
4
请老师检查，有可以优化的地方吗
17
0
1
老师，请看一下，有什么地方可以优化的吗？
1
0
5
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星