请老师帮忙看一下
来源：4-8 编程练习
慕斯卡8252506
2019-07-20 13:33:31
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.regCon{
width: 1000px;
height:800px;
margin: 100px auto;
background-color:gainsboro;
font-family: "微软雅黑";
}
.title{
height: 40px;
font-size: 16px;
color: #fff;
background-color:dodgerblue;
line-height: 40px
}
.conten{
position: relative;
width: 600px;
margin: 30px auto;
color: gray;
}
.user{
margin-top:50px;
border:gainsboro;
}
.tip{
position: absolute;
left: 350px;
margin-left:10px;
color: red;
font-size: 10px;
}
.userName{
width: 225px;
height: 30px;
position: absolute;
left: 100px;
}
.button{
position: absolute;
left: 200px;
width: 60px;
height: 40px;
background-color: #1E90FF;
border-radius: 5px;
color: white;
text-align: center;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="regCon">
<div class="title">用户注册</div>
<div class="conten">
<p class="user">
<span>用户名：</span>
<input type="text" name="" class="userName" id="userName">
<span class="tip"></span>
</p>
<p class="user">
<span>登录密码：</span>
<input type="password" name="userName" class="userName" id="password">
<span class="tip"></span> </p>
<p class="user">
<span>确认密码：</span>
<input type="password" name="userName" class="userName" id="afPassword">
<span class="tip"></span> </p>
<p class="user">
<span>姓名：</span>
<input type="text" name="userName" class="userName" id="name">
<span class="tip"></span> </p>
<p class="user">
<span>性别：</span>
<select name="" class="userName" id="userSex">
<option value="nan">男</option>
<option value="wonnan">女</option>
</select>
</p>
<p class="user">
<span>身份证号码：</span>
<input type="text" name="userName" class="userName" id="userId">
<span class="tip"></span> </p>
<p class="user">
<span>邮箱：</span>
<input type="text" name="userName" class="userName" id="mail">
<span class="tip"></span> </p>
<p class="user">
<span>手机号码：</span>
<input type="text" name="userName" class="userName" id="phone">
<span class="tip"></span> </p>
<input type="button" name="" value="提交" class="button" id="button"/>
</div>
</div>
<script>
//获取元素
var userName = document.getElementById("userName"),
userPassword = document.getElementById("password"),
afPassword = document.getElementById("afPassword"),
uname = document.getElementById("name"),
userSex = document.getElementById("userSex"),
userId = document.getElementById("userId"),
userMail = document.getElementById("mail"),
userPhone = document.getElementById("phone"),
userbutton = document.getElementById("button");
var tip = document.getElementsByClassName("tip");
//光标离开时的判断
function getBulr(element,handler){
element.onblur=handler;
}
getBulr(userName,function(){
var patter=/\w{6,20}/;
if(!userName.value){
tip[0].innerHTML="用户名不能为空";
boole1=false;
}else if(!patter.exec(userName.value)){
tip[0].innerHTML="6-20位字母、数字或“_”,字母开头";
boole1=false;
}else{
tip[0].innerHTML="ok";
boole1=true;//信息正确
}
});
getBulr(userPassword,function(){
var patter=/\w{6,20}/;
if(!userPassword.value){
tip[1].innerHTML="请设置密码";
boole2=false;
}else if(!patter.exec(userPassword.value)){
tip[1].innerHTML="密码6-18位，包括数字字母或符号，中间不能有空格";
boole2=false;
}else{
tip[1].innerHTML="ok"
boole2=true;
}
});
getBulr(afPassword,function(){
if(!afPassword.value){
tip[2].innerHTML="请再次输入密码";
boole3=false;
}else if(afPassword.value!=userPassword.value){
tip[2].innerHTML="两次密码不一致"
boole3=false;
}else{
tip[2].innerHTML="ok"
boole3=true;
}
});
getBulr(uname,function(){
var patter=/[\u4e00-\u9fa5]/
if(!uname.value){
tip[3].innerHTML="请输入真实姓名";
boole4=false;
}else if(!patter.exec(uname.value)){
tip[3].innerHTML="真实姓名，两位到四位的中文汉字";
boole4=false;
}else{
tip[3].innerHTML="ok";
boole4=true;
}
});
getBulr(userId,function(){
var patter=/\d{17}[0-9X]/
if(!userId.value){
tip[4].innerHTML="请输入身份证号码";
boole5=false;
}else if (!patter.exec(userId.value)){
tip[4].innerHTML="请输入十八位正确格式的身份证号码";
boole5=false;
}else{
tip[4].innerHTML="ok";
boole5=true;
}
});
getBulr(userMail,function(){
var patter=/\w+@\w+\.[a-zA-Z_]{2,}/
if(!userMail.value){
tip[5].innerHTML="邮箱不能为空";
boole6=false;
}else if (!patter.exec(userMail.value)){
tip[5].innerHTML="邮箱格式错误";
boole6=false;
}else{
tip[5].innerHTML="ok";
boole6=true;
}
});
getBulr(userPhone,function(){
var patter=/\d{11}/
if(!userPhone.value){
tip[6].innerHTML="手机号码不能为空";
boole7=false;
}else if (!patter.exec(userPhone.value)){
tip[6].innerHTML="手机号码错误";
boole7=false;
}else{
tip[6].innerHTML="ok";
boole7=true;
}
});
//点击提交时，验证用户信息是否全部填写正确
userbutton.onclick=function(){
if(boole1==false||boole2==false||boole3==false||boole4==false||boole5==false||boole6==false||boole7==false){
alert("有一个或多个信息有误");
}else
alert("验证成功");
}
</script>
</body>
</html>
1回答
-
同学你好，效果实现的很好，棒棒的，祝学习愉快~
0
相似问题