编写简单的登陆页面

1.简单登录界面（自己设置css样式）

代码如下

<form id="loginForm" action="#" method="post" novalidate="novalidate">
        <div class="login_box">
            <div class="login_box_left">
                <h1>一个账号，玩转商城所有服务！</h1>
                <h2>购机械，购二手装备，购配件，购模型，服务保修</h2>
                <div class="login_tip" style="display: none;">*您的账号密码不匹配，请重新输入</div>
                <div class="login_name_box">
                    <div class="login_name_icon"></div>
                    <input type="text" id="username" name="username" class="loginname" maxlength="25" tabindex="1" placeholder="用户名/已验证的手机号码">
                </div>
                <div class="check_code_tip" id="usernameError" style="display: none;"></div>
                <div class="login_code_box">
                    <div class="login_code_icon"></div>
                    <input type="password" id="password" name="password" class="logincode" maxlength="20" tabindex="2" autocomplete="off" placeholder="密码">
                </div>
                <div class="check_code_tip" id="passwordError" style="display: none;"></div>
                <div class="forg_code_box">
                    <input type="checkbox" id="isRememberUsername" name="isRememberUsername" value="true" tabindex="4">
                    <span>&nbsp;&nbsp;&nbsp;记住用户名</span>
                    <a href="password_back.html">忘记密码</a>
                    <a href="register.html">免费注册</a>
                </div>
                <input type="button" class="login_btn" style="width:341px;cursor:pointer;" value="登&nbsp;&nbsp;&nbsp;录">
            </div>
            <div class="login_box_right">
            </div>
        </div>
    </form>

2、编写js

1. 给输入框设置鼠标移出时的验证，①验证用户名 ②验证密码
2. 给登录按钮设置点击事件监听 ①首先判断用户名密码是否为空（不能为空） ②进入登录接口，利用Ajax与控制层建立连接，传入用户名和密码，并判断是否正确。
3. 代码如下：

define(['common'],function(common){
	var isAccountValidate=false;
	var isPasswordValidate=false;
	//1.失去光标时验证用户名
	function accountCheck(){
		$("#username").blur(function(){
			isAccountValidate= checkAccount();
		});
	}
	//2.失去光标时验证密码
	function pwdCheck(){
		$("#password").blur(function(){
			isPasswordValidate= checkPwd();
		});
	}
	//登录
	function loginBtn(){
		//创建单击事件
		$(".login_btn").click(function(){
			//判断验证信息
			//失败返回信息
			if(!isAccountValidate){
				return checkAccount();
			}
			if(!isPasswordValidate){
				return checkPwd();
			}
			//成功进入接口登录
			$.ajax({
				url:baseUrl+"user/do_login.do",
				type:"post",
				data:{account:$("#username").val(),password:$("#password").val()},
				xhrFields: {withCredentials: true},
				crossDomain: true,
				success:function(data){
					//判断是否登陆成功
					if(data.status==0){
						//成功判断是否是管理员
						if(data.data.role ==2){
							$(window).attr("location","../admin/index.html");
						}else{
							$(window).attr("location","index.html");
						}
					}else{
						$("#passwordError").css({display:"block"});
						$("#passwordError").html(data.msg);
					}
				}
			});
		});
	}



	return {
		accountCheck:accountCheck,
		pwdCheck:pwdCheck,
		loginBtn:loginBtn
	};

	//检查用户名
	function checkAccount(){
		//获取用户名
		var account = $("#username").val();
		$("#usernameError").css({display:"none"});
		if(account == ""){
			$("#usernameError").css({display:"block"});
			$("#usernameError").html("用户名不能为空！");
			return false;
		}
		return true;
	}
	//检查密码
	function checkPwd(){
		//获取输入密码
		var pwd = $("#username").val();
		$("#passwordError").css({display:"none"});
		if(pwd == ""){
			$("#passwordError").css({display:"block"});
			$("#passwordError").html("密码不能为空！");
			return false;
		}
		return true;
	}

});