# 小型Web应用 – 注册与登录验证系统

背景介绍

随着用户注册信息的积累，网站用户需验证身份并进行登录操作。本项目实现了用户注册和登录功能，通过HTML、CSS和JavaScript实现表单验证，并利用localStorage保存用户信息，提高用户参与度和系统可用性。

思路分析

表单验证逻辑
- 用户注册表单验证用户名和密码的合法性，例如用户名长度、密码长度或包含特殊字符。
- 注册时使用localStorage保存用户信息，方便后续登录验证。
登录界面展示
- 登录表单验证用户名和密码是否正确，验证逻辑分离至JS模块。
- 使用localStorage保存登录状态，用户可随时查看账号信息。
数据结构与验证
- 使用函数处理用户名和密码的验证逻辑，例如：
  - 用户名长度验证：if (username.length < 2) show error message；
  - 密码验证：if (password.match(/[a-z]/gi) === null) show error message；
  - 强制用户输入非空字段。

代码实现

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Web App</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f4f4f4;
    }
    #container {
      max-width: 400px;
      margin: 30px auto;
      padding: 10px;
    }
    h2 {
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="container">
    <h2>注册/登录</h2>
    <form id="registerForm">
      <label>用户名*</label><input type="text" name="username" required><br>
      <label>密码*</label><input type="password" name="password" required><br>
      <button type="submit">注册</button>
    </form>
    <form id="loginForm">
      <label>用户名*</label><input type="text" name="username" required><br>
      <label>密码*</label><input type="password" name="password" required><br>
      <button type="submit">登录</button>
    </form>
    <div id="status">
      <p id="success">注册成功！您已成功注册！</p>
    </div>
  </div>
</body>
</html>

JavaScript 实现

// localStorage.js  
// 保存和读取用户信息  

const localStorageKey = 'user';

function saveUser(username, password, userId) {
  try {
    const user = {
      username,
      password,
      userId
    };
    const json = JSON.stringify(user);
    localStorage.setItem(localStorageKey, json);
    alert('您已成功保存信息！');
  } catch (error) {
    alert('保存信息时出错：' + error);
  }
}

function loadUser() {
  try {
    const user = JSON.parse(localStorage.getItem(localStorageKey));
    if (user) {
      document.getElementById('status').textContent = '登录成功！当前用户为 ' + user.username;
    } else {
      alert('请先登录以查看信息！');
    }
  } catch (error) {
    alert('加载用户信息时出错：' + error);
  }
}

function validateRegister() {
  const username = document.getElementById('registerForm').querySelector('input[name="username"]').value;
  const password = document.getElementById('registerForm').querySelector('input[name="password"]').value;

  if (username.trim() === '') {
    alert('用户名不能为空！');
    return;
  }
  if (password.length < 4) {
    alert('密码长度必须至少为4位！');
    return;
  }
  if (!/\w+/.test(password)) {
    alert('密码必须包含字母！');
    return;
  }
  // 验证成功后保存用户信息
  saveUser(username, password, 'user' + Date.now());
}

function validateLogin() {
  const username = document.getElementById('loginForm').querySelector('input[name="username"]').value;
  const password = document.getElementById('loginForm').querySelector('input[name="password"]').value;

  if (username.trim() === '') {
    alert('用户名不能为空！');
    return;
  }
  if (password.length < 4) {
    alert('密码长度必须至少为4位！');
    return;
  }
  if (!/\w+/.test(password)) {
    alert('密码必须包含字母！');
    return;
  }
  loadUser();
}

总结

本项目通过以下方式实现注册与登录功能：
1. 表单验证：使用JavaScript验证用户名和密码的合法性，分离验证逻辑。
2. 数据存储：通过localStorage保存用户信息，提升用户体验。
3. 安全性：验证密码包含字母，确保用户信息的正确性。

代码实现清晰，验证逻辑简洁，支持用户注册和登录操作，满足中级程序员的需求。