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> 记住用户名</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="登 录">
</div>
<div class="login_box_right">
</div>
</div>
</form>
2、编写js
- 给输入框设置鼠标移出时的验证,①验证用户名 ②验证密码
- 给登录按钮设置点击事件监听 ①首先判断用户名密码是否为空(不能为空) ②进入登录接口,利用Ajax与控制层建立连接,传入用户名和密码,并判断是否正确。
- 代码如下:
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;
}
});
更多推荐
编写简单的登陆页面
发布评论