前端简单登录注册

html页面

	<div class="main">
		<!-- 左侧信息栏 -->
		<div class="sideleft">
			<h1>新浪微博    分享生活</h1>
			<h4>随时随地 发现新鲜事</h4>
			</br></br></br>
			<p>分享生活、数据化管理，轻松记录生活美好。</p>
			<p>打造信息共享，健康向上的环境。</p>
			<p>自由评论，建立粉丝与偶像互动平台。</p>
			<p>展示自己，无限可能，每一个你都有可能成为一颗新星。</p>

		</div>
		<!-- 右侧登陆界面 -->
		<div class="sideright">
			<div class="index">
				<form action="#" method="get" id="formId">
					<p id="headline">用户登陆</p>
					<p class="astyle">用户名：</p>
					<input type="text"  name="email" id="username"  placeholder="请输入您的用户名">
					<p class="astyle">账号：</p>
					<input type="text"  name="email" id="InputEmail"  placeholder="请输入您的邮箱">
					<p class="astyle">密码：</p>
					<input type="password"  name="password" id="InputPassword" placeholder="请输入您的密码6-16位">
					<input type="submit" value="登陆" name="login" id="sub">
					</br>
					<p class="bstyle"><input type="checkbox" name="rempas" />  记住密码</p>
					<p class="cstyle">忘记密码</p>
					</br>
					<div id="CheckMsg" class="msg"></div>
                    <button class="bstyle" id="login1"><a href="phonelog.html">手机验证码登录</a></button>
					<button class="cstyle" id="login2" onclick="setNewdata()">注册</button>
				</form>

			</div>
		</div>
	</div>

css页面 * { margin: 0; padding: 0; list-style: none; }

body {
background: url(’…/images/bg/skin.jpg’);
background-size: 100%;
}

.main {
width: 1200px;
height: 450px;
}

.sideleft {
width: 460px;
height: 250px;
float: left;
padding: 85px 130px
}

.sideleft p {
padding: 8px 0;
font-size: 16px;
}

.sideright {
width: 480px;
height: 450px;
float: right;
}

.sideright .index {
width: 330px;
height: 450px;
background-color: rgba(255, 255, 255, 0.75);
margin: 50px 90px;
}

#headline {
font-size: 22px;
text-align: center;
padding: 20px;
}

input[type=“text”],
input[type=“password”],
input[type=“submit”] {
display: block;
margin: 0 auto;
font-size: 15px;
width: 240px;
}

input[type=“text”],
input[type=“password”] {
height: 35px;
border-radius: 3px;
border: 1px solid #c8cccf;
color: #969ba1;
outline: 0;
}

input[type=“submit”] {
margin-top: 25px;
height: 35px;
background: #e7891c;
color: #ffffff;
font-weight: bold;
font-size: 16px;
border: none;
}

input[type=“submit”]:hover {
background: #e7891c;
cursor: pointer;
}

.astyle {
margin: 5px 0 5px 42px;
font-size: 17px;
color: #45484d;
}

.bstyle {
display: block;
float: left;
margin-left: 46px;
font-size: 15px;
}

.cstyle {
display: block;
float: right;
margin-right: 46px;
font-size: 15px;
}

#login1,#login2{
color: #db8945;
font-family: ‘微软雅黑’;
border: none;
background-color: transparent;
}

#login1 a{
text-decoration: none;
color: #db8945;
font-family: ‘微软雅黑’;
border: none;
}

/手机验证码登录页面/
#getpass2{
width: 90px;
height: 35px;
margin: 5px 44px -10px 44px;
font-size: 14px;
text-align: center;
}

/错误信息提醒/
.msg{
color: #ea8c37;
font-size: 14px;
padding-left: 40px;
padding-top: 10px;
clear: both;
font-weight: bold;
height: 30px;
}
js页面

//登录与注册转换
function setNewdata() {
var name = document.getElementById(“login2”).innerHTML;
if (name == “注册”) {
document.getElementById(“headline”).innerHTML = “用户注册”;
document.getElementById(“sub”).value = “注册”;
document.getElementById(“login2”).innerHTML = “账号登录”;
} else if (name == “账号登录”) {
document.getElementById(“headline”).innerHTML = “用户登录”;
document.getElementById(“sub”).value = “登录”;
document.getElementById(“login2”).innerHTML = “注册”;
}

}

var submit = document.getElementById(“sub”).value;
//若页面处于注册页面
if (submit = “注册”) {
document.getElementById(“InputEmail”).onblur = “InputEmailBlur()”;
document.getElementById(“InputPassword”).onblur = “InputPasswordBlur()”;
document.getElementById(“sub”).onclick = “checkForm()”;

//信息提醒
function showMsg(msg) {
    document.getElementById("CheckMsg").innerHTML(msg);
}

//表单提交时验证 @returns {boolean}

function checkForm() {

    var Form = document.getElementById("formId");
    var bool = true;
    if (!InputPasswordBlur()) bool = false;
    if (!InputEmailBlur()) bool = false;
    if (bool == true) {
        Form.submit();
    }
    return bool;

}
//邮箱输入框失去焦点

function InputEmailBlur() {
    var email = document.getElementById("InputEmail");
    /* 邮箱不为空 */
    if (email.value == "") {
        alert = "邮箱不为空。"
        return false;
    }

    /* 邮箱格式验证 */
    var reg = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
    if (reg.test(email.value) == false) {
        alert = "邮箱格式错误。";
        return false;
    }
    /* 邮箱是否已注册过 */
    //发送ajax请求并处理
    var request = new XMLHttpRequest();
    request.open("GET", "serice.php?email.value=" + document.getElementById("InputEmail").value);
    request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
            var message = request.responseText;
            if (message == 0) {
                showMsg("邮箱已注册过");
                return false;
            } else {
                showMsg("邮箱可注册");
                return true;
            }
        }
    }

    return true;
}

//密码输入框失去焦点

function InputPasswordBlur() {
    var pwd = document.getElementById("InputPassword");

    /* 密码为空/不为空 */
    if (pwd.value == "") {
        alert = "密码为空。"
        return false;
    }

    /* 密码长度 */
    if (pwd.value.length < 6 || pwd.value.length > 16) {
        alert = "密码长度应为6-16。"
        return false;
    }

    return true;
}
//创建新的用户
document.getElementById("submit").onclick = function () {
    //发送ajax请求并处理
    var req = new XMLHttpRequest();
    req.open("POST", "service.php", true);
    var data = "username=" + document.getElementById("username").value +
        "&InputEmail=" + document.getElementById("InputEmail").value +
        "&InputPassword=" + document.getElementById("InputPassword").value;
    req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    req.send(data);
    req.onreadystatechange = function () {
        if (req.readyState === 4 && req.status === 200) {
            showMsg("注册成功，请返回登录");
        } else {
            alert("发生错误：" + req.status);
        }
    }
}

} else if (submit = “登录”) {
//页面处于登录页面

    //信息提醒
    function showMsg(msg) {
        document.getElementById("CheckMsg").innerHTML(msg);
    }

//验证表单是否为空，若为空则将焦点聚焦在input表单上，否则表单通过，登录成功
function check(form) {
    var email = document.getElementById("InputEmail"),
        password = document.getElementById("InputPassword");
    var email = email.value(),
        password = password.value();
    if (!email || email == "") {
        form.email.focus();
        return false;
    }
    if (!password || password == "") {
        form.password.focus();
        return false;
    }
    //这里为用ajax获取用户信息并进行验证，如果账户密码不匹配则登录失败
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'getList.php', true); //是否异步
    // 提交
    xhr.send();
    // 等待服务器返回内容
    xhr.onreadystatechange = function () {
        //0没调用open方法，1表示未调用send方法，2正在等待状态码和头的返回，3 已接受部分数据，但还没接受完，不能使用该对象的属性和方法，4已加载，所有数据执行完毕
        // 响应状态码，表示页面执行无误
        if (xhr.readyState == 4 && xhr.status == 200) {
            // alert(xhr.responseText);
            if(xhr.responseText=="true"){
                showMsg("登录成功，正在跳转");
                location.href="./index.html";
            }
            

        } else {
            alert("发生错误：" + request.status);
        }
    }

}

}

//监听回车键提交
window.onload = function () {
document.onkeydown = keyDownSearch;

function keyDownSearch(e) {
    // 兼容FF和IE和Opera
    var theEvent = e || window.event;
    var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
    if (code == 13) {
        document.getElementById('submit').click(); //具体处理函数
        return false;
    }
    return true;
}

};