大学解惑08 - 做一个简单的先注册再登录功能

题目：

        界面要求：输入用户名和密码，底部有登录和注册按钮。

        点击事件：1 如果先点击登录，需要提示用户去注册。

                          2 如果点击注册后，将用户名和密码进行前端保存，之后可进行登录，

                          3 并且登录时需要和注册时候的用户名密码进行匹配校验，校验成功，提示

                             用户登录成功。

一、页面布局 

<div class="box">
   <div class="field">
     <label>用户名：</label>
     <input type="text" id="user" />
   </div>
   <div class="field">
      <label>密码：</label>
      <input type="password" id="pwd" />
    </div>
    <div class="field">
       <button onclick="login()">登录</button>
       <button onclick="register()">注册</button>
    </div>
</div>

        解析： 1、通过给用户名和密码的input输入框添加id属性，有助于javascript获取到用户名和密码的dom对象

            2、在登录按钮元素本身添加onclick点击事件，预备调用login方法

            3、在注册按钮元素本身添加onclick点击事件，预备调用register方法

二、预备全局变量

        由于做的是纯前端的样例作业，所以将注册成功的用户名和密码存储到全局变量中，以便登录的时候可以进行匹配验证，代码如下：

var globalUser = ''; // 全局存储用户名
var globalPwd = ''; // 全局存储密码

三、添加注册事件

function register() {
    // 获取输入的用户名
    var user = document.getElementById('user').value;
    // 获取输入的密码
    var pwd = document.getElementById('pwd').value;
    if (!user) {
      alert('请输入用户名');
      return;
    }
    if (!pwd) {
       alert('请输入密码');
       return;
    }
    // 将用户名和密码存储到全局变量
    globalUser = user; 
    globalPwd = pwd;
    alert('注册成功');
}

        解析：1、这段代码中首先获取输入框的dom元素，获取输入框内的值的方法就是 .value，

                    2、注意return关键字，他可以使代码在某个地方停止向下执行。试想，如果用户名都

                        为空了，肯定不应该继续去判断密码了，节能增效嘛

                     3、globalUser = user;  如果用户名和密码都输入了，则象征性的将user 和 pwd 存储

                        到全局变量中。

四、添加登录事件

function login() {
   var user1 = document.getElementById('user').value;
   var pwd1 = document.getElementById('pwd').value;
   if (!user1) {
      alert('请输入用户名');
       return;
   }
   if (!pwd1) {
      alert('请输入密码');
      return;
   }
   if (!globalUser) {
      alert('请先注册账号');
      return;
   }
   if (user1 === globalUser && pwd1 === globalPwd) {
       alert('登录成功');
   } else {
      alert('用户名或密码错误，请重试');
   }
}

        解析：1、这里同构判断全局的globalUser变量是否有值来校验是否注册过

                   2、再通过本次输入的用户名和密码来判断输入的与注册时候的值是否相同。