手把手教你创建一个简单的注册页面

kaixin_啊啊

于 2024-09-15 23:45:31 发布

阅读量176

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/m0_73879806/article/details/142290825

版权

在这个教程中，我们将逐步学习如何创建一个简单的注册页面，包括使用 HTML 来构建页面结构、CSS 进行样式设置，以及使用 JavaScript 实现表单验证。

页面效果：

1. HTML 页面结构

首先，我们设置基本的 HTML 页面结构，包括页面头部和表单部分。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link type="text/css" rel="stylesheet" href="css/css.css" />
    <title>注册页面示例</title>
  </head>
  <body style="background: #fff">
    <!-- 顶部导航栏 -->
    <header>
      <div class="header">
        <div class="logo">
          <img src="images/logo.png" width="100" />
        </div>
        <div class="nav">
          <a href="index.html">网站首页</a>
          <a href="list2.html">历史</a>
          <a href="list3.html">工艺</a>
          <a href="list4.html">文化</a>
          <a href="list5.html">更多</a>
          <a href="#">注册</a>
        </div>
      </div>
    </header>
    <!-- 横幅图像 -->
    <div class="banner">
      <img src="images/1.webp" style="width: 100%; height: 120%" />
    </div>
    
    <!-- 表单内容 -->
    <div class="width">
      <form class="form" action="#" id="form">
        <!-- 表单内容在下面解释 -->
      </form>
    </div>
  </body>
</html>

解释：

<!DOCTYPE html> 声明文档类型，确保浏览器按照 HTML5 标准解析页面。
<head> 部分包含元数据，如字符编码和页面标题。
<header> 中是网站的导航栏，包括 logo 和链接。
<div class="banner"> 用于显示横幅图像。
<div class="width"> 包含注册表单，表单的内容将在下一部分详细介绍。

2. 构建表单元素

接下来，我们在 <form> 标签中添加表单元素，包括输入框和按钮。

<!-- 用户名 -->
<div class="input">
  <span>用户名：</span>
  <input type="text" class="phone" placeholder="请输入用户名" id="username" />
</div>
<!-- 密码 -->
<div class="input">
  <span>密码：</span>
  <input type="password" class="phone pwd" placeholder="请输入密码" id="pwd" />
</div>
<!-- 确认密码 -->
<div class="input">
  <span>确认密码：</span>
  <input type="password" class="phone pwd2" placeholder="请输入密码" id="pwd2" />
</div>
<!-- 提交按钮 -->
<div class="input">
  <button type="submit" class="denglu">注册</button>
</div>

解释：

每个 div 包含一个输入字段，由一个 span 和一个 input 组成。
placeholder 提供占位符文本，提示用户该输入框的用途。
id 属性用于唯一标识每个输入元素，以便在 JavaScript 中获取它们的值。
<button type="submit"> 表示提交按钮。

3. JavaScript 表单验证

我们添加一个脚本来验证用户输入的数据。

<script>
  document.getElementById("form").addEventListener("submit", function (event) {
    event.preventDefault(); // 阻止表单默认提交行为

    // 获取输入值
    let username = document.getElementById("username").value.trim();
    let password = document.getElementById("pwd").value.trim();
    let confirmPassword = document.getElementById("pwd2").value.trim();

    // 验证用户名：只能包含字母和数字，长度为 3-15
    let usernameRegex = /^[a-zA-Z0-9]{3,15}$/;
    if (!usernameRegex.test(username)) {
      alert("用户名格式不正确，必须是英文字母或数字，长度3-15！");
      return;
    }

    // 验证密码：长度必须在 6-15 之间
    let passwordRegex = /^.{6,15}$/;
    if (!passwordRegex.test(password)) {
      alert("密码长度必须在6到15位之间！");
      return;
    }

    // 验证密码匹配
    if (password !== confirmPassword) {
      alert("确认密码与密码不一致！");
      return;
    }

    alert("注册成功！");
  });
</script>

解释：

document.getElementById("form").addEventListener("submit", function (event) {...})：当用户点击“注册”按钮时，触发 submit 事件。
event.preventDefault()：阻止表单的默认提交行为，方便我们在验证时显示错误信息。
usernameRegex 和 passwordRegex：正则表达式，用于匹配用户名和密码的格式。
alert：用于向用户显示验证结果。

4. 详细的验证规则

我们可以添加更多的验证规则，比如对真实姓名、电子邮箱等进行检查。

// 真实姓名验证：必须是 2-10 个中文字符
let chineseNameRegex = /^[\u4e00-\u9fa5]{2,10}$/;
let realName = document.getElementById("name").value.trim();
if (!chineseNameRegex.test(realName)) {
  alert("真实姓名必须是中文，2-10个字符！");
  return;
}

// 电子邮箱验证
let email = document.getElementById("email").value.trim();
let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (email === "" || !emailRegex.test(email)) {
  alert("电子邮箱格式不正确！");
  return;
}

解释：

使用正则表达式 chineseNameRegex 确保真实姓名为 2-10 个中文字符。
emailRegex 确保电子邮箱符合基本的格式。

5. 完整的表单验证

现在，完整的 JavaScript 表单验证代码如下：

<script>
  document.getElementById("form").addEventListener("submit", function (event) {
    event.preventDefault(); // 阻止表单提交

    let username = document.getElementById("username").value.trim();
    let password = document.getElementById("pwd").value.trim();
    let confirmPassword = document.getElementById("pwd2").value.trim();
    let realName = document.getElementById("name").value.trim();
    let email = document.getElementById("email").value.trim();

    // 正则表达式
    let usernameRegex = /^[a-zA-Z0-9]{3,15}$/;
    let passwordRegex = /^.{6,15}$/;
    let chineseNameRegex = /^[\u4e00-\u9fa5]{2,10}$/;
    let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    // 验证用户名
    if (!usernameRegex.test(username)) {
      alert("用户名格式不正确，必须是英文字母或数字，长度3-15！");
      return;
    }

    // 验证密码
    if (!passwordRegex.test(password)) {
      alert("密码长度必须在6到15位之间！");
      return;
    }

    // 确认密码
    if (password !== confirmPassword) {
      alert("确认密码与密码不一致！");
      return;
    }

    // 真实姓名
    if (!chineseNameRegex.test(realName)) {
      alert("真实姓名必须是中文，2-10个字符！");
      return;
    }

    // 电子邮箱
    if (email === "" || !emailRegex.test(email)) {
      alert("电子邮箱格式不正确！");
      return;
    }

    alert("注册成功！");
  });
</script>

总结：