<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/reset.css"/>
<link rel="stylesheet" href="css/register.css"/>
<link rel="stylesheet" href="iconfont/iconfont.css"/>
</head>
<body>
<div class="nav">
<div class="img-center">
<a href="main.html"><img src="img/logo.png"/></a> <strong>注册</strong>
</div>
</div>
<div class="content">
<div class="reg-wrap ">
<div class="form">
<p class="userName">
<span class="iconfont"></span>
<input id="userInput" type="text" placeholder="学号/教师证号"><span></span>
</p>
<p class="name">
<span class="iconfont"></span>
<input id="nameInput" type="text" placeholder="姓名"><span></span>
</p>
<p class="userPwd">
<span class="iconfont"></span>
<input id="pwdInput" type="password" placeholder="密码"><span></span>
</p>
<p class="confirm">
<span class="iconfont"> </span>
<input id="conInput" type="password" placeholder="确认密码"><span></span>
</p>
<p class="email">
<span class="iconfont"></span>
<input id="emailInput" type="text" placeholder="邮箱"><span></span>
</p>
</div>
<input class="loginbtn" type="submit" value="注册" />
</div>
</div>
</body>
<script>
var pending = function (id,reg) {
var inp = document.getElementById(id);
inp.onblur = function () {
if(reg.test(this.value)){
this.nextSibling.innerHTML = ""; // 这个 的 下一个兄弟节点 的 内部HTML = “”
this.nextSibling.className = "right iconfont";//
}else{
this.nextSibling.innerHTML = "";
this.nextSibling.className = "wrong iconfont";
}
}
};
//学号、教师证号 为两位的数字
var regUser = /^\d{2}$/;
/*var regMobile2 = /^(13[0-9]|14[57]|15[0-9]|18[0-9])\d{8}$/;*/
pending("userInput",regUser);
//姓名 2-4位
var regName=/^[\u4e00-\u9fa5]{2,4}$/;
pending("nameInput",regName);
//密码 以字母开头,长度在6~18之间,只能包含字符、数字和下划线
var regPwd=/^[a-zA-Z]\w{5,17}$/;
pending("pwdInput",regPwd);
//邮箱 \w+@\w+.\w+
//barack.obama.aaa.aaaa@whitehouse.gov
var regEmail = /^\w+@\w+\.\w+$/;
var regEmail2 = /^\w+([+-.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
pending("emailInput",regEmail);
//确认密码
var conInput=document.getElementById('conInput');
var pwdInput=document.getElementById('pwdInput');
conInput.οnblur=function(){
if(regPwd.test(this.value)==true){
this.nextSibling.innerHTML = ""; // 这个 的 下一个兄弟节点 的 内部HTML = “”
this.nextSibling.className = "right iconfont";//
return true;
}else{
this.nextSibling.innerHTML = ""; // 这个 的 下一个兄弟节点 的 内部HTML = “”
this.nextSibling.className = "wrong iconfont";//
return false
}
}
</script>
</html>
下面是css的
.nav{height:72px;margin-left:30%;} .nav a{display:inline-block;border-right:2px solid black;margin-bottom: 20px;} .nav strong{font-size: 27px;} .img-center{padding-top:10px;} /*content中间的注册区域*/ .content{background: #282828;} .reg-wrap{background: url("../img/bgform.png") no-repeat center;height:600px;overflow: hidden;position:relative;} .form{width:385px;height:255px;margin:0 auto;display:block;margin-top: 236px;} .form p{width:385px;height:50px;background: #e5e7e9;border-bottom: 1px solid #bec0c2;position:relative;} .form input{width:300px;border:0 none;outline: 0;background: #e5e7e9;line-height:20px; top:17px;font-size: 18px;margin-left:15px;} .iconfont{font-size: 30px;line-height:50px;color:#b0b3b7;} .loginbtn{width:386px;height:53px;color:white;background: #43baa9;display:block; margin:0 auto;outline: 0;border:0 none;cursor: pointer;border-radius: 5px;font-size: 20px;font-weight: bold;} .wrong { color: red; } .right { color: green; }