老师，帮忙检查，看一下需要优化的地方
来源：4-8 编程练习
慕仙本仙_
2020-02-19 22:19:36
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.top{
background-color: rgb(135,206,235);
color:rgb(255,255,255);
font-size: 25px;
font-weight:700;
font-family: "微软雅黑";
height:50px;
line-height: 50px;
}
.bottom{
width:100%;
height: 800px;
font-family: "微软雅黑";
background-color: #EEEEEE;
}
table{
width:100%;
margin:0 auto;
padding-top:120px;
}
.bottom td:first-child{
width:45%;
text-align: right;
height:30px;
}
.true{
display: inline;
color:red;
}
#btn{
margin-left:45%;
background-color: rgb(135,206,235);
border:none;
width:80px;
height:30px;
margin-top:30px;
}
#mes{
text-align:center;
}
</style>
</head>
<body>
<div class="top">
用户注册
</div>
<div class="bottom">
<table>
<tr>
<td>
用户名：
</td>
<td>
<input id=""/>
<span class="true"></span>
</td>
</tr>
<tr>
<td>
登陆密码：
</td>
<td>
<input id="password"/>
<span class="true"></span>
</td>
</tr>
<tr>
<td>
确认密码：
</td>
<td>
<input />
<span class="true"></span>
</td>
</tr>
<tr>
<td>
姓名：
</td>
<td>
<input id="name"/>
<span class="true"></span>
</td>
</tr>
<tr>
<td>
性别：
</td>
<td>
<select>
<option>
男
</option>
<option>
女
</option>
</select>
</td>
</tr>
<tr>
<td>
身份证号码：
</td>
<td>
<input id="myId"/>
<span class="true"></span>
</td>
</tr>
<tr>
<td>
邮箱：
</td>
<td>
<input />
<span class="true"></span>
</td>
</tr>
<tr>
<td>
手机号码：
</td>
<td>
<input />
<span class="true"></span>
</td>
</tr>
</table>
<button id="btn">提交</button>
<br />
<span id='mes'></span>
</div>
<script type="text/javascript">
var btn=document.getElementById('btn');
var userInputs=document.getElementsByTagName('input');
var myMes=document.getElementsByClassName('true');
var spanMes=document.getElementById('mes');
//用户输入的信息
var userMesg={
'username' :userInputs[0],
'password' :userInputs[1],
'passwordx' :userInputs[2],
'name' :userInputs[3],
'idnum' :userInputs[4],
'email' :userInputs[5],
'tel' :userInputs[6]
};
//正则表达式
var pattern={
'username' :/^[a-zA-Z][a-zA-Z0-9_]{5,19}$/,
'password' :/^\S{6,18}$/,
'name' :/^[\u4e00-\u9fa5]{2,4}$/,
'idnum' :/^[0-9]{17}[0-9|x]$/,
'email' :/^\w+@([a-z]+\.[a-z]+$)/,
'tel' :/^1(3[0-9]|47|5[0-3]|5[5-9]|8[0125-9])\d{8}$/
};
//错误信息提示
var errorMes={
'username' :"6-20位的英文字母、数字、下划线，字母开头",
'password' :"6-18位的英文字母、数字、特殊符号，不能有空格",
'passwordx' :"两次输入的密码不一致",
'name' :"真实姓名要求是2-4个汉字",
'idnum' :"15或18位数字（若最后一位是X则原样输入）",
'email' :"电子邮箱格式不正确",
'tel' :"请输入真实的11位手机号码"
};
//空白span提示标签
var trueMes={
'username' :myMes[0],
'password' :myMes[1],
'passwordx' :myMes[2],
'name' :myMes[3],
'idnum' :myMes[4],
'email' :myMes[5],
'tel' :myMes[6]
}
//空白测试
var test={
'username' :false,
'password' :false,
'passwordx' :false,
'name' :false,
'idnum' :false,
'email' :false,
'tel' :false
}
//失去焦点的判断
function blurEvent(tempUser,regExp){
if(regExp.test(tempUser.value)){
return true;
}else{
return false;
}
}
//用户名的匹配
userMesg.username.onblur=function(){
var confirm=blurEvent(userMesg.username,pattern.username);
if(confirm){
trueMes.username.innerHTML='ok';
trueMes.username.style.color="green";
test.username=true;
}else{
trueMes.username.innerHTML=errorMes.username;
}
}
//登陆密码的匹配
userMesg.password.onblur=function(){
var confirm=blurEvent(userMesg.password,pattern.password);
if(confirm){
trueMes.password.innerHTML='ok';
trueMes.password.style.color="green";
test.password=true;
}else{
trueMes.password.innerHTML=errorMes.password;
}
}
//确认密码的匹配
userMesg.passwordx.onblur=function(){
if(this.value==userMesg.password.value){
trueMes.passwordx.innerHTML='ok';
trueMes.passwordx.style.color="green";
test.passwordx=true;
}else{
trueMes.passwordx.innerHTML=errorMes.passwordx;
}
}
//姓名的匹配
userMesg.name.onblur=function(){
var confirm=blurEvent(userMesg.name,pattern.name);
if(confirm){
trueMes.name.innerHTML='ok';
trueMes.name.style.color="green";
test.name=true;
}else{
trueMes.name.innerHTML=errorMes.name;
}
}
//身份证号码的匹配
userMesg.idnum.onblur=function(){
var confirm=blurEvent(userMesg.idnum,pattern.idnum);
if(confirm){
trueMes.idnum.innerHTML='ok';
trueMes.idnum.style.color="green";
test.idnum=true;
}else{
trueMes.idnum.innerHTML=errorMes.idnum;
}
}
//邮箱的匹配
userMesg.email.onblur=function(){
var confirm=blurEvent(userMesg.email,pattern.email);
if(confirm){
trueMes.email.innerHTML='ok';
trueMes.emai.style.color="green";
test.email=true;
}else{
trueMes.email.innerHTML=errorMes.email;
}
}
//手机号码的匹配
userMesg.tel.onblur=function(){
var confirm=blurEvent(userMesg.tel,pattern.tel);
if(confirm){
trueMes.tel.innerHTML='ok';
trueMes.tel.style.color="green";
test.tel=true;
}else{
trueMes.tel.innerHTML=errorMes.tel;
}
}
btn.onclick=function(){
if(test.username==false||test.password==false||test.passwordx==false||
test.name==false||test.idnum==false||test.email==false||test.tel==false){
spanMes.style.display="block";
spanMes.style.color="red";
spanMes.innerHTML="请完善相关信息";
}else{
spanMes.style.color="green";
spanMes.innerHTML="提交成功";
spanMes.style.display="block";
}
}
</script>
</body>
</html>
1回答
-
好帮手慕慕子
2020-02-20
同学你好，对于你代码中存在的问题解答如下：
如下所示email单词拼写错误，建议修改：
建议优化：密码框建议修改type类型为password，效果实现会更好。
如果我的回答帮助到了你，帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题