代码还有哪个方面优化的地方吗？
来源：4-8 编程练习
小贱丶
2019-09-23 11:50:21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: auto;
min-height:600px;
}
.header{
min-width: 960px;
height: 50px;
background-color: #0088CC;
}
.header p{
font-size: 18px;
text-align: left;
line-height: 50px;
color: #fff;
margin-left: 10px;
}
.screen-1{
background-color: #5e5e5e;
min-height:600px;
text-align: center;
}
.screen-1 #form{
margin: 0 auto;
padding-top: 100px;
width: 1000px;
height: 600px;
}
.screen-1 #form p .show,.screen-1 #form p .hidden,.screen-1 #form p .hiddenSex{
display: inline-block;
width: 400px;
height: 40px;
line-height: 40px;
font-size: 14px;
margin-right: 10px;
}
.screen-1 #form p .hidden{vertical-align: middle;padding-left: 5px;}/*设置右侧元素默认是居中对齐,使其不会与盒子冲突*/
.screen-1 #form p .hiddenSex{padding-left: 5px;}
.screen-1 #form p .show{text-align: right;}
.screen-1 #form p .hidden,.screen-1 #form p .hiddenSex{text-align:left;font-size:12px;color:red;}
.screen-1 #form #btn{
margin-top:50px;
width:80px;
height: 40px;
line-height: 40px;
font-size:15px;
background-color:pink;
border: 1px solid #000;
border-radius:5px;
color:#fff;
}
.screen-1 #form input,.screen-1 #form select{
width: 160px;
height: 25px;}
.screen-1 #form select{
text-align: center;}
</style>
</head>
<body>
<div class="box">
<header class="header">
<p>用户注册</p>
</header>
<div class="screen-1">
<form id="form">
<p><span class="show">用户名:</span><input type="text" id="userId" title="0"><span class="hidden" id="hiddenShow"></span></p>
<p><span class="show">登陆密码:</span><input type="password" id="userPassword" title="1"><span class="hidden" id="hiddenPassword"></span></p>
<p><span class="show">确认密码:</span><input type="password" id="userRegPassword" title="2"><span class="hidden" id="regPassword"></span></p>
<p><span class="show">姓名:</span><input type="text" id="userName" title="3"><span class="hidden" id="hiddenName"></span></p>
<p><span class="show">性别:</span><select id="userSex">
<option value="man">男</option>
<option value="women">女</option>
</select><span class="hiddenSex" id="hiddenSex"></span></p>
<p><span class="show">身份证号码:</span><input type="text" id="userNumber" title="4"><span class="hidden" id="hiddenUserNum"></span></p>
<p><span class="show">邮箱:</span><input type="email" id="userEmail" title="5"><span class="hidden" id="hiddenUserEmail"></span></p>
<p><span class="show">手机号码:</span><input type="text" id="userPhone" title="6"><span class="hidden" id="hiddenUserPhone"></span></p>
<button type="button" value="提交" id="btn">提交</button>
</form>
</div>
</div>
<script>
var totElems = {
userId:document.getElementById('userId'),
userPassword:document.getElementById('userPassword'),
userRegPassword:document.getElementById('userRegPassword'),
userName:document.getElementById('userName'),
userSex:document.getElementById('userSex'),
userNumber:document.getElementById('userNumber'),
userEmail:document.getElementById('userEmail'),
userPhone:document.getElementById('userPhone'),
userInputs:document.getElementsByTagName('input'),
btn:document.getElementById('btn'),
hiddenSpan:document.getElementsByClassName('hidden')
};
var pattern = {
userId:/^[a-zA-Z]\w{5,19}/,
userPassword:/^\S{6,18}$/,
userName:/^[\u4e00-\u9fa5]{2,4}$/,
userNumber:/^[1-9]{1}\d{13}[\d|x]$|^[1-9]{1}\d{16}[\d|x]$/,
userEmail:/^[a-z0-9]+(?:[._-][a-z0-9]+)*@[a-z0-9]+(?:[._-][a-z0-9]+)*\.[a-z]{2,4}$/i,
userPhone:/^(13)[0-9]{9}$|(147)\d{8}$|(15)[0-3,5-9]{1}\d{8}$|(18)[0,2,5-9]{1}\d{8}$/
};
var wrongText = {
userId :'请输入6-20位字母、数字或“_”,以字母开头',
userPassword:"请输入6-18位，中间不能有空格",
userRegPassword:"两次输入密码不一致",
userName:"请输入两位到四位的中文汉字",
userNumber:"15位或者18位的数字,最后一位可为x",
userEmail:"请输入正确的邮箱地址",
userPhone:"请输入正确的手机号码"
};
var sum = 0;
//循环函数
function each(elems,fn){
for(var i = 0;i<elems.length;i++){
fn(i,elems[i]);//每个elems下的元素，都执行一次fn函数
}
}
//提交按钮点击后进行跑验证
totElems.btn.onclick = function() {
each(totElems.hiddenSpan,function(index,elem){
if(elem.innerHTML === "OK"){sum++;}
});
if(sum == totElems.hiddenSpan.length){
alert("验证成功");
}
else{alert("验证失败");}
};
//循环遍历input，添加事件
(function eachInput(){
// console.log(totELems.userId);
for(var i = 0;i<totElems.userInputs.length;i++){
console.log(totElems.userInputs[i]);
// test(totELems.userInputs[i]);
console.log(totElems.userInputs[i].id);
decide(totElems.userInputs[i].id);
}
// console.log(totELems.userPassword);
})();
//判断
function decide(name){
// totELems[name].onblur = resultOut(name,testif(name));
totElems[name].onblur = function(){
if(name == 'userRegPassword'){
if(totElems.userPassword.value == totElems.userRegPassword.value && totElems[name].value != ""){
console.log('OK');
resultOut(name,'OK');
}
else if(totElems[name].value == ""){resultOut(name,'');}
else{
console.log('Not-OK');
resultOut(name,wrongResult(name));
}
}
else if(pattern[name].test(totElems[name].value)){
console.log('OK');
resultOut(name,'OK');
// resultOut(name,"OK");
}
else{
console.log('Not-OK');
// resultOut(name,'请输入6-20位字母、数字或“_”,以字母开头');
resultOut(name,wrongResult(name));
// resultOut(name,"");
}
}
}
//输出不通过语句
function wrongResult(name){
// console.log(wrongText[name]);
return wrongText[name];
}
//输出检测值
function resultOut(elems,val){
var Num = totElems[elems].title;
console.log(totElems.hiddenSpan[Num].innerHTML = val);
// console.log(totELems[elems].title);
// console.log(totELems.hiddenSpan[0].innerHTML = val);
// totElems.hiddenSpan[elems.title].innerHTMl = val;
}
</script>
</body>
</html>
如上，想知道还有哪里能继续优化改进的
1回答
-
同学你好！
代码效果实现的挺好的，无需优化了哟。
如果帮到了你，欢迎采纳，祝学习愉快~
0
相似问题