js实现登录与注册界面

下面是“js实现登录与注册界面”的完整攻略：

界面设计

首先，我们需要设计一个简单美观的登录与注册界面，可以使用HTML、CSS和Bootstrap等工具来实现。其中，我们需要添加以下元素：

• 注册表单：包含用户输入用户名、密码、确认密码等信息的表单；
• 登录表单：包含用户输入用户名、密码等信息的表单；
• 注册和登录按钮：用于提交注册和登录表单；
• 反馈信息：用于提供错误提示或者注册成功、登录成功的提示信息。

注册表单

我们需要获取用户注册信息，这里，我们可以使用表单来实现。在HTML文件中添加如下代码：

<div class="container">
  <h2>用户注册</h2>
  <form id="registerForm">
    <div class="form-group">
      <label for="username">用户名:</label>
      <input type="text" class="form-control" id="username" placeholder="请输入用户名" name="username">
    </div>
    <div class="form-group">
      <label for="password">密码:</label>
      <input type="password" class="form-control" id="password" placeholder="请输入密码" name="password">
    </div>
    <div class="form-group">
      <label for="confirmPassword">确认密码:</label>
      <input type="password" class="form-control" id="confirmPassword" placeholder="请再次输入密码" name="confirmPassword">
    </div>
    <button type="button" id="registerBtn" class="btn btn-primary">注册</button>
  </form>
</div>

上述代码中，“container”类在Bootstrap中用来设置容器的大小。我们在表单中添加了三个文本输入框，分别用于输入用户名、密码和确认密码。此外，还有一个“注册”按钮，用于提交表单。我们可以在JavaScript中添加事件监听器来监听单击按钮事件，以触发表单提交。

登录表单

接下来，我们需要添加登录表单。在HTML文件中添加如下代码：

<div class="container">
  <h2>用户登录</h2>
  <form id="loginForm">
    <div class="form-group">
      <label for="username1">用户名:</label>
      <input type="text" class="form-control" id="username1" placeholder="请输入用户名" name="username1">
    </div>
    <div class="form-group">
      <label for="password1">密码:</label>
      <input type="password" class="form-control" id="password1" placeholder="请输入密码" name="password1">
    </div>
    <button type="button" id="loginBtn" class="btn btn-primary">登录</button>
  </form>
</div>

上述代码中，“container”类和表单的设计与注册表单相同。这里，我们要添加的就是登录按钮，用于提交登录表单。

JavaScript实现

使用JavaScript来实现表单的提交、验证和提示等功能。具体步骤如下：

1. 定义一个空数组users，用于存储已注册用户信息。
2. 判断用户名和密码是否符合要求。
3. 注册功能：将输入信息添加到users数组中，再将数据存储到本地localStorage中。
4. 登录功能：将输入用户名和密码与users数组中的信息进行相应的比对，如匹配成功则提示登录成功，否则提示登录失败。

下面是示例代码：

// 定义注册和登录表单
let registerForm = document.getElementById('registerForm');
let loginForm = document.getElementById('loginForm');

// 定义users数组
let users = [];

// 注册功能
function registerUser() {
  let username = document.getElementById('username').value;
  let password = document.getElementById('password').value;
  let confirmPassword= document.getElementById('confirmPassword').value;

  // 验证用户名和密码
  if(username === '' || password === '' || confirmPassword === '') {
    alert('用户名或密码不能为空！');
    return;
  }
  if(password !== confirmPassword) {
    alert('两次输入的密码不一致！');
    return;
  }

  // 将用户信息添加到数组和本地存储
  let user = {username: username, password: password};
  users.push(user);
  localStorage.setItem('users', JSON.stringify(users));
  alert('注册成功！');
}

// 登录功能
function loginUser() {
  let username1 = document.getElementById('username1').value;
  let password1 = document.getElementById('password1').value;

  // 遍历用户数组，匹配用户名和密码
  for(let i=0; i<users.length; i++) {
    if(username1 === users[i].username && password1 === users[i].password) {
      alert('登录成功！');
      return;
    }
  }
  alert('用户名或密码错误！');
}

// 注册按钮事件监听器
let registerBtn = document.getElementById('registerBtn');
registerBtn.addEventListener('click', registerUser);

// 登录按钮事件监听器
let loginBtn = document.getElementById('loginBtn');
loginBtn.addEventListener('click', loginUser);

在以上示例代码中，“JSON.stringify()”函数用于将users数组转化为JSON字符串，以便保存到localStorage中，而“JSON.parse()”函数用于将JSON字符串转化为JavaScript对象。

总结

通过上面的步骤和代码，我们可以实现一个简单的登录与注册界面，读者可以根据需要对界面进行自定义和优化。此外，可以使用第三方工具和框架，如jQuery和Vue.js等，来进一步简化代码和提高效率。