登录功能的实现

登录界面与注册界面一样，作用不一样罢了，先来看一下整体页面

登录功能的实现

该界面的头部与尾部代码与注册界面的一致

HTML：

<div class="login">
    <div class="easyui-panel" title="登      录" style="width:100%;max-width:400px;padding:30px 60px;">

        <div style="margin-bottom:20px">
            <input id="username" class="easyui-textbox" style="width:100%;height:40px;padding:12px" onblur="checkName()" data-options="prompt:'请输入用户名',iconCls:'icon-man',iconWidth:38">
        </div>
        <div style="margin-bottom:20px">
            <input id="password" class="easyui-textbox" type="password" style="width:100%;height:40px;padding:12px" data-options="prompt:'请输入密码',iconCls:'icon-lock',iconWidth:38">
        </div>
        <div style="margin-bottom:20px">
            <input type="checkbox" checked="checked" onclick="check()" id="checkName">
            <span>记住用户名</span>
            <span style="padding-left: 50px"></span>
            <input type="checkbox" onclick="checkEvent(this)" id="checkPaw">
            <span>记住密码</span>
        </div>
        <div>
            <a class="easyui-linkbutton" onclick="login()" data-options="iconCls:'icon-ok'"style="float: left">
                <span style="font-size:14px;">登录</span>
            </a>
            <a onclick="reset()" class="easyui-linkbutton" iconCls="icon-clear" style="float: right">重置</a>
        </div>
        <div style="margin-top:20px;padding-top: 20px">
            <span style="padding-left: 150px"/>
            <span>未注册？点击<a href="user/register.html">注册</a></span>
        </div>
    </div>
</div>

在登录之前，当然也需要对用户操作进行一下判断

1.验证用户名是否存在。此处可与注册时验证用户名调用同一个后台方法

但需要注意的是：两者判断的目的不一样，注册时是用户名存在则不能进行操作需要重新输入，而登录时则是用户名不存在是则不能进行操作，需要重新输入，因此需要对应后台返回的text数据进行对应的所需要的判断弹出框

在前台JavaScript中：

登录功能的实现

此处需要注意的是：验证用户名是否存在，是在光标离开用户名输入框的时候执行，由于onblur事件在jQuery中无法产生效果，需要在原生的JavaScript中才会有效果，由以上代码可以看出，页面加载完成后就会自动执行以上代码。

在后台：

登录功能的实现

Sql语句：

登录功能的实现

当验证完毕以后，则可以进行登录操作了，在前台

/**
* 登录
*/

function login() {
        //获取去字符串左右空格的用户名
        var username = $("#username").textbox('getValue').trim();
        //获取去字符串左右空格的密码
        var password = $("#password").textbox('getValue').trim();
         //用于判断用户名与密码是否为空
        if(username==="" || password===""){
            showMessageCenter("用户名或密码不能为空",200);
            return;
        }
        //记住用户名与密码
        rememberUserAndPwd(username, password);
        //将用户名与密码保存为json格式的数据
        var jsonObj = {username: username, password: password};
        //发送一个ajax请求，返回一个text数据结果
        var data = getTextData("login.hebe", json2str(jsonObj));

        if (data == "success") {
          // $.messager.alert('温馨提示:', '登录成功', 'success');
           // window.location.href = "project/project_list.html";
            window.location.href = "index1.html";
        } else {
            $.messager.alert('温馨提示:', '登录失败', 'error');
            $("#username").textbox("clear");
            $("#password").textbox("clear");
        }
}