注册框
程序员文章站
2022-04-18 12:14:15
...
HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>简单的注册</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/index-style-1.0.0.css" />
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<span id="shade"></span>
<button id="rgBtn">注册</button>
<div id="register">
<h3>We need a few details</h3>
<form name="" method="" action="">
<span>
Username:
<input type="text" value="" id="username"/>
</span>
<span>
E-mail Address:
<input type="text" id="email" />
</span>
<span>
tel-number:
<input type="text" id="tel-number"/>
</span>
<span>
Password:
<input type="password" id="password"/>
</span>
<input id="register-sub" type="submit" value="Finish Account Setup" />
</form>
</div>
</body>
</html>
CSS部分
@charset "utf-8";
button{
height: 50px;
width: 100px;
background: green;
color: #fff;
outline: none;
}
#shade{
height: 100%;
width: 100%;
background: #5f6677;
position: fixed;
z-index: -1;
opacity: 0.8;
filter: alpha(opacity=80);
display: none;
}
#register{
width: 414px;
height: 716px;
border: solid 10px #aaacb5;
border-radius: 27px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
display: none;
padding:0 24px 0 28px;
background: #FFFFFF;
}
#register h3{
height: 78px;
width: 100%;
font-size: 28px;
border-bottom: solid 1px #e8e8e8;
text-align: center;
line-height: 78px;
font-weight: 900;
color: #434d66;
}
#register form{
font-size: 14px;
}
#register span{
display: block;
font-size: 14px;
font-weight: 900;
margin-top: 26px;
position: relative;
}
#register span input{
display: block;
outline: none;
height: 57px;
width: 344px;
border: solid 1px #b0b1b1;
border-radius: 8px;
padding: 0 34px 0 34px;
margin-top: 15px;
}
#register #register-sub{
padding: 0 34px 0 34px;
margin-top: 77px;
display: block;
height: 57px;
width: 414px;
background: #386b9d;
color: #FFFFFF;
font-weight: 900;
font-size: 16px;
border-radius: 8px;
}
#register span .hint{
color: red;
font-size: 12px;
position: absolute;
top: 72px;
}
js部分
window.onload = function(){
var rgBtn = $('rgBtn');
var sheet = document.styleSheets[1];
var rules = sheet.cssRules || sheet.rules;
var count = 0; //判断用户输入信息是否完全正确
//注册按钮点击事件
rgBtn.onclick = function(){
rules[1].style.display = 'block';
rules[2].style.display = 'block';
};
//用户名格式判断
var userName = $('username');
userName.onfocus = judgeUserFocus;
userName.onblur = judgeUserBlur;
//邮箱格式判断
var email = $('email');
email.onfocus = judgeEmailFocus;
email.onblur = judgeEmailBlur;
//手机号判断
var telNumber = $('tel-number');
telNumber.onfocus = judgeTelNumberFocus;
telNumber.onblur = judgeTelNumberBlur;
//密码格式判断
var oPassword = $('password');
oPassword.onfocus = judgePasswordFocus;
oPassword.onblur = judgePasswordBlur;
//点击注册按钮
var registerSub = $('register-sub');
registerSub.onclick = function(){
if(count == 4){
alert("恭喜您注册成功");
}else{
alert("请填写完信息");
}
}
//·由字母a~z(不区分大小写)、数字0~9、点、减号或下划线组成
//·只能以字母开头,包含字符 数字 下划线,例如:beijing.2008
//·用户名长度为4~18个字符
//用户名判断
function judgeUserBlur(){
var userValue = userName.value;
var pattern = /^[a-z][\w.-]{3,17}$/gi;
if(!pattern.test(userValue)){
var oSpan = document.createElement('span');
userName.parentNode.appendChild(oSpan);
oSpan.innerHTML = '您输入的有户名不合法,请重新输入'
oSpan.className = 'hint';
}else{
count++;
}
}
function judgeUserFocus(){
var parent = userName.parentNode;
if(parent.lastChild.className == 'hint'){
var childrens = userName.parentNode;
userName.parentNode.removeChild(userName.parentNode.lastChild);
}
}
//邮箱格式判断
function judgeEmailBlur(){
var emailValue = email.value;
var pattern = /^[1-9a-z]+(\.\w+)*@(\w)+(\.\w+)*(\.\w+)$/gi;
if(!pattern.test(emailValue)){
var oSpan = document.createElement('span');
email.parentNode.appendChild(oSpan);
oSpan.innerHTML = '您输入的邮箱不合法,请重新输入'
oSpan.className = 'hint';
}else{
count++;
}
}
function judgeEmailFocus(){
var parent = email.parentNode;
if(parent.lastChild.className == 'hint'){
var childrens = email.parentNode;
email.parentNode.removeChild(email.parentNode.lastChild);
}
}
//手机号判断
function judgeTelNumberBlur(){
var telNumberValue = telNumber.value;
var pattern = /^[1]\d{10}$/g;
if(!pattern.test(telNumberValue)){
var oSpan = document.createElement('span');
telNumber.parentNode.appendChild(oSpan);
oSpan.innerHTML = '您输入的手机号长度不正确,请重新输入'
oSpan.className = 'hint';
}else{
count++;
}
}
function judgeTelNumberFocus(){
var parent = telNumber.parentNode;
if(parent.lastChild.className == 'hint'){
var childrens = telNumber.parentNode;
telNumber.parentNode.removeChild(telNumber.parentNode.lastChild);
}
}
//密码格式判断
function judgePasswordBlur(){
var oPasswordValue = oPassword.value;
var pattern = /.{6,}/gi;
if(!pattern.test(oPasswordValue)){
var oSpan = document.createElement('span');
oPassword.parentNode.appendChild(oSpan);
oSpan.innerHTML = '您输入的密码不足6位,请重新输入'
oSpan.className = 'hint';
}else{
count ++;
}
}
function judgePasswordFocus(){
var parent = oPassword.parentNode;
if(parent.lastChild.className == 'hint'){
var childrens = oPassword.parentNode;
oPassword.parentNode.removeChild(oPassword.parentNode.lastChild);
}
}
//移动注册框
var registerBox = $('register');
registerBox.onmousedown = function(ev){
var e = ev || window.event;
this.style.cursor = 'move';
var boxOffsetX = e.clientX - this.offsetLeft; //保存当前事件位置,至包含元素的位置(包含边框),IE中新有的offsetX 和 offsetY是包含块元素内容的偏移量(不包含边框)
var boxOffsetY = e.clientY - this.offsetTop;
document.onmousemove = function(evt){
document.body.style.overflow = 'hidden';
var e = evt || window.event;
registerBox.style.margin = 0;
registerBox.style.top = e.clientY - boxOffsetY + 'px';
registerBox.style.left = e.clientX - boxOffsetX + 'px';
};
}
registerBox.onmouseup = function(){
document.onmousemove = null; //消除移动,否则还会登录框还是跟着鼠标移动
registerBox.style.cursor = 'default';
}
};
function $(id){
return document.getElementById(id);
}
现在只是写的比较简单的,等学到后面再来改改