看一下我的效果和问题

来源：4-8 编程练习

你的粉丝_啊德

2019-04-21 22:28:49

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
section{
width:800px;
margin:0 auto;
}
.h{
width:100%;
height:40px;
line-height:40px;
background-color:blue;
color:white;
font-size:18px;
padding-left:20px;
box-sizing:border-box;
}
.main{
background-color:#eee;
height:500px;
padding-top:20px;
}
.item{
width:100%;
height:45px;
}
.txt,
input,
.show{
float: left;
}
.txt{
width:35%;
font-size:14px;
text-align:right;
}
input{
width:30%;
}
.show{
width:33%;
height:30px;
font-size:12px;
color:red;
text-indent:1em;
}
select{
width:30%;
float: left;
}
button{
width:60px;
height:35px;
line-height:35px;
text-align:center;
background-color:blue;
color:white;
display:block;
margin:0 auto;
}
</style>
</head>
<body>
<section>
<div class="h">用户注册</div>
<div class="main">
<div class="item">
<div class="txt">用户名：</div>
<input type="text" id="user">
<div class="show"></div>
</div>

<div class="item">
<div class="txt">登录密码：</div>
<input type="password" id="password">
<div class="show"></div>
</div>

<div class="item">
<div class="txt">确认密码：</div>
<input type="password" id="passwords">
<div class="show"></div>
</div>

<div class="item">
<div class="txt">姓名：</div>
<input type="text" id="name">
<div class="show"></div>
</div>

<div class="item">
<div class="txt">性别：</div>
<select>
<option value="man">男</option>
<option value="woman">女</option>
</select>
</div>

<div class="item">
<div class="txt">身份证号码：</div>
<input type="text" id="idname">
<div class="show"></div>
</div>

<div class="item">
<div class="txt">邮箱：</div>
<input type="mail" id="mail">
<div class="show"></div>
</div>

<div class="item">
<div class="txt">手机号码：</div>
<input type="number" id="tel">
<div class="show"></div>
</div>
<button>提交</button>
</div>
</section>
    <script>
var pattern={
user:/^[a-zA-Z_]\w{5,19}$/,
password:/^\S.{5,17}$/,
name:/^[\u4e00-\u9fa5]{2,4}$/,
idname:/^\d{15}$|^\d{18}$|^\d{17}x$/,
mail:/^\w+@[a-z]+\.[a-z]+|^\w+@[a-z]+\.[a-z]+\.[a-z]+/,
tel:/(134|135|136|137|138|139|147|150|151|152|158|159|182|183|187|188|130|131|132|155|156|185|186|133|153|180|189)\d{8}$/
};
var txt={
user:"6-20位字母、数字或“_”,字母开头",
password:"6-18位数字字母或符号，不能有空格",
passwords:'两次输入的密码不一致',
name:"两位到四位的中文汉字",
idname:"15位或18位数字，18位时最后一位可以是x",
mail:"请输入正确邮箱格式",
tel:"请输入正确手机格式"
};
//获取元素
function gain(name){
return document.querySelector(name);
}
function gainAll(name){
return document.querySelectorAll(name);
}
var shows=gainAll('.show');

//传入两个dom节点，正则表达式和错误提示语句   失去焦点时执行判断
function check(ele1,ele2,pattern,errortext){
ele1.addEventListener('blur',function(){
pattern.test(ele1.value)?ele2.innerText='ok':ele2.innerText=errortext;
})
}

//确认密码失去焦点，判断两次密码是否一致
var password1 = gain('#password'),password2 = gain('#passwords');
password2.addEventListener('blur',function(){
if(password2.value==''){
shows[2].innerText='密码不能为空'
}else{
password2.value===password1.value?shows[2].innerText='ok':shows[2].innerText=txt.passwords;
}
})

// 提交按钮
gain('button').addEventListener('click',function(){
var n=true;
for(var i=0;i<shows.length;i++){
if(shows[i].innerText!='ok'){
n=false;
shows[i].innerText=Object.values(txt)[i];
}
}
if(n){
alert('验证成功');
}
})
// 执行
check(gain('#user'),shows[0],pattern.user,txt.user);
check(gain('#password'),shows[1],pattern.password,txt.password);
check(gain('#name'),shows[3],pattern.name,txt.name);
check(gain('#idname'),shows[4],pattern.idname,txt.idname);
check(gain('#mail'),shows[5],pattern.mail,txt.mail);
check(gain('#tel'),shows[6],pattern.tel,txt.tel);

</script>
</body>
</html>

/^\w+@[a-z]+\.([a-z]{2,4}$)/这样有什么不行吗，后面的为什么只能少于两位时有用，超出4位时没用，上面代码我改了

写回答

1回答