编写简单的登陆页面

article/2025/10/3 0:55:22

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

给输入框设置鼠标移出时的验证，①验证用户名 ②验证密码
给登录按钮设置点击事件监听 ①首先判断用户名密码是否为空（不能为空） ②进入登录接口，利用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;}});