老师请检查下还有需要优化的么？
来源：4-8 编程练习
人间第一流
2020-01-25 01:37:26
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
header{
width:1000px;
height:40px;
background-color:#00BFFF;
font-size:25px;
color:#F8F8FF;
line-height:40px;
text-indent:25px;
margin:0 auto;
}
.warp{
width:1000px;
margin:0 auto;
background-color:#DCDCDC;
}
.con{
padding-top:60px;
width:800px;
height:500px;
margin:0 auto;
font-size:20px;
color:#2F4F4F;
}
.con span{
display:inline-block;
width:250px;
text-align:right;
margin-left: 50px;
}
.sel{
width:165px;
}
.btn{
background-color:#00BFFF;
width:60px;
height:30px;
border-radius:5px;
margin-top:40px;
margin-left:335px ;
}
.tip{
color:red;
font-size:10px;
}
</style>
</head>
<body>
<header>用户注册</header>
<div class="warp">
<div class="con">
<span>用户名:</span><input type="text"><span class="tip"></span><br/>
<span>密码:</span><input type="text"><span class="tip"></span><br/>
<span>确认密码:</span><input type="text"><span class="tip"></span><br/>
<span>姓名:</span><input type="text"><span class="tip"></span><br/>
<span>性别:</span><select class="sel">
<option></option>
<option value="man">男</option>
<option value="women">女</option>
</select><br/>
<span>身份证号:</span><input type="text"><span class="tip"></span><br/>
<span>邮箱:</span><input type="text"><span class="tip"></span><br/>
<span>手机号码:</span><input type="text"><span class="tip"></span><br/>
<input class="btn" type="button" value="提交">
</div>
</div>
<script>
var input=document.getElementsByTagName("input");
var tip=document.getElementsByClassName("tip");
var btn=document.getElementsByClassName("btn")[0];
var bool1=false;
var bool2=false;
var bool3=false;
var bool4=false;
var bool5=false;
var bool6=false;
var bool7=false;
input[0].onblur=function(){
if(/^[a-z]\w{6,20}$/.test(input[0].value && input[0].value!="")){
tip[0].innerHTML="ok";
bool1=true;
}else{
tip[0].innerHTML="用户名输入错误";
}
}
input[1].onblur=function(){
if(/^\S{6,18}$/.test(input[1].value && input[1].value!="")){
tip[1].innerHTML="ok";
bool2=true;
}else{
tip[1].innerHTML="密码6-18位，包括数字字母或符号，中间不能有空格";
}
}
input[2].onblur=function(){
if(input[1].value==input[2].value && input[2].value!=""){
tip[2].innerHTML="ok";
bool3=true;
}else{
tip[2].innerHTML="两次输入密码不一致";
}
}
input[3].onblur=function(){
if(/^[\u4e00-\u9fa5]{2,4}$/.test(input[3].value && input[3].value!="")){
tip[3].innerHTML="ok";
bool4=true;
}else{
tip[3].innerHTML="要求真实姓名，两位到四位的中文汉字";
}
}
input[4].onblur=function(){
if(/^\d{17}[\d|x]|\d{15}$/.test(input[4].value && input[4].value!="")){
tip[4].innerHTML="ok";
bool5=true;
}else{
tip[4].innerHTML="身份证号为15位或18位数字";
}
}
input[5].onblur=function(){
if(/^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}$/.test(input[5].value && input[5].value!="")){
tip[5].innerHTML="ok";
bool6=true;
}else{
tip[5].innerHTML="邮箱格式不正确";
}
}
input[6].onblur=function(){
if(/^0?(13|14|15|18|17)[0-9]{9}$/.test(input[6].value && input[6].value!="")){
tip[6].innerHTML="ok";
bool7=true;
}else{
tip[6].innerHTML="手机号码格式不正确";
}
}
btn.onclick=function(){
if(bool1==true && bool2==true && bool3==true && bool4==true && bool5==true && bool6==true && bool7==true){
alert("验证通过");
}else{
alert("信息不完善");
}
}
</script>
</body>
</html>
1回答
-
好帮手慕星星
2020-01-29
同学你好，代码中验证有问题，test方法中只写输入框中内容就好，不需要添加其它判断，参考修改：
可以重新修改测试下。如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题
回答 2
回答 1
回答 1
回答 1
回答 2