1. Python技术站首页
  2. 其他
  3. Java

用javascript制作qq注册动态页面

• Java

下面是用 JavaScript 制作 QQ 注册动态页面的攻略：

1. 前置知识

在进行动态页面制作前，需要掌握以下一些前置知识：

  • HTML：前端页面标记语言，用于编写网页基本结构和内容；
  • CSS：前端页面样式表语言，用于美化网页界面；
  • JavaScript：前端脚本语言，用于实现网页交互和动画效果；
  • DOM：文档对象模型，即用 JavaScript 操作页面元素的接口；
  • AJAX：异步 JavaScript 和 XML，用于无需刷新页面即可进行数据交互。

2. 制作流程

QQ 注册动态页面制作的主要流程如下：

  1. 编写 HTML 结构和 CSS 样式。
  2. 使用 DOM 和 AJAX 实现交互效果。

下面将针对具体需求，展示两种示例演示效果，以帮助你更好地理解制作过程。

示例一

HTML 结构

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>QQ 注册</title>
</head>

<body>
  <!-- 注册表单 -->
  <form id="register-form">
    <div>
      <label for="username">用户名：</label>
      <input type="text" id="username" placeholder="请输入用户名">
    </div>
    <div>
      <label for="password">密码：</label>
      <input type="password" id="password" placeholder="请输入密码">
    </div>
    <div>
      <label for="confirm-password">确认密码：</label>
      <input type="password" id="confirm-password" placeholder="请再次输入密码">
    </div>
    <div>
      <label for="email">邮箱：</label>
      <input type="text" id="email" placeholder="请输入邮箱">
    </div>
    <button type="submit">提交</button>
  </form>
</body>

</html>

CSS 样式

/* 全局样式 */
* {
  box-sizing: border-box;
}

body {
  font-family: "Arial", sans-serif;
}

/* 表单样式 */
form {
  margin: 20px auto;
  width: 300px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type="text"],
input[type="password"] {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
  outline: none;
}

button[type="submit"] {
  margin-top: 10px;
  padding: 5px 10px;
  border: none;
  border-radius: 3px;
  background-color: #4CAF50;
  color: #fff;
  cursor: pointer;
}

JavaScript 实现

// 监听表单提交事件
document.querySelector("#register-form").addEventListener("submit", function(event) {
  // 阻止表单默认提交行为
  event.preventDefault();

  // 获取表单中的值
  var username = document.querySelector("#username").value;
  var password = document.querySelector("#password").value;
  var confirmPassword = document.querySelector("#confirm-password").value;
  var email = document.querySelector("#email").value;

  // 判断密码是否一致
  if (password !== confirmPassword) {
    alert("两次输入的密码不一致，请重试！");
    return;
  }

  // 使用 AJAX 提交表单数据
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "http://localhost:3000/register");
  xhr.setRequestHeader("Content-type", "application/json");
  xhr.onload = function() {
    if (xhr.status === 200) {
      alert("注册成功！");
    } else {
      alert("注册失败，请重试！");
    }
  };
  xhr.send(JSON.stringify({
    username: username,
    password: password,
    email: email
  }));
});

示例二

HTML 结构

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>QQ 注册</title>
</head>

<body>
  <!-- 注册表单 -->
  <form>
    <div>
      <label for="username">用户名：</label>
      <input type="text" id="username" placeholder="请输入用户名">
      <div id="username-tip"></div>
    </div>
    <div>
      <label for="password">密码：</label>
      <input type="password" id="password" placeholder="请输入密码">
      <div id="password-tip"></div>
    </div>
    <div>
      <label for="confirm-password">确认密码：</label>
      <input type="password" id="confirm-password" placeholder="请再次输入密码">
      <div id="confirm-password-tip"></div>
    </div>
    <div>
      <label for="email">邮箱：</label>
      <input type="text" id="email" placeholder="请输入邮箱">
      <div id="email-tip"></div>
    </div>
    <button type="submit" disabled>提交</button>
  </form>
</body>

</html>

CSS 样式

/* 全局样式 */
* {
  box-sizing: border-box;
}

body {
  font-family: "Arial", sans-serif;
}

/* 表单样式 */
form {
  margin: 20px auto;
  width: 300px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type="text"],
input[type="password"] {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
  outline: none;
}

button[type="submit"] {
  margin-top: 10px;
  padding: 5px 10px;
  border: none;
  border-radius: 3px;
  background-color: #4CAF50;
  color: #fff;
  cursor: pointer;
}

/* 提示信息样式 */
div[id$="-tip"] {
  font-size: 14px;
  color: #f00;
}

JavaScript 实现

// 获取表单元素和提示信息元素
var form = document.querySelector("form");
var usernameInput = document.querySelector("#username");
var passwordInput = document.querySelector("#password");
var confirmPasswordInput = document.querySelector("#confirm-password");
var emailInput = document.querySelector("#email");
var usernameTip = document.querySelector("#username-tip");
var passwordTip = document.querySelector("#password-tip");
var confirmPasswordTip = document.querySelector("#confirm-password-tip");
var emailTip = document.querySelector("#email-tip");

// 监听输入框输入事件和表单提交事件
usernameInput.addEventListener("input", checkUsername);
passwordInput.addEventListener("input", checkPassword);
confirmPasswordInput.addEventListener("input", checkConfirmPassword);
emailInput.addEventListener("input", checkEmail);
form.addEventListener("submit", function(event) {
  // 阻止表单默认提交行为
  event.preventDefault();
  // 判断是否所有输入框都已通过验证
  if (usernameInput.classList.contains("valid") &&
    passwordInput.classList.contains("valid") &&
    confirmPasswordInput.classList.contains("valid") &&
    emailInput.classList.contains("valid")) {
    // 使用 AJAX 提交表单数据
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "http://localhost:3000/register");
    xhr.setRequestHeader("Content-type", "application/json");
    xhr.onload = function() {
      if (xhr.status === 200) {
        alert("注册成功！");
      } else {
        alert("注册失败，请重试！");
      }
    };
    xhr.send(JSON.stringify({
      username: usernameInput.value,
      password: passwordInput.value,
      email: emailInput.value
    }));
  } else {
    alert("表单未通过验证，请检查后重试！");
  }
});

// 检查用户名是否合法
function checkUsername() {
  var username = this.value.trim();
  if (username === "") {
    usernameInput.classList.remove("valid");
    usernameInput.classList.add("invalid");
    usernameTip.innerHTML = "用户名不能为空";
  } else if (username.length < 6 || username.length > 18) {
    usernameInput.classList.remove("valid");
    usernameInput.classList.add("invalid");
    usernameTip.innerHTML = "用户名长度必须介于6到18个字符之间";
  } else if (!/^\w+$/.test(username)) {
    usernameInput.classList.remove("valid");
    usernameInput.classList.add("invalid");
    usernameTip.innerHTML = "用户名只能由字母、数字和下划线组成";
  } else {
    usernameInput.classList.remove("invalid");
    usernameInput.classList.add("valid");
    usernameTip.innerHTML = "";
  }
  checkFormValidity();
}

// 检查密码是否合法
function checkPassword() {
  var password = this.value;
  if (password === "") {
    passwordInput.classList.remove("valid");
    passwordInput.classList.add("invalid");
    passwordTip.innerHTML = "密码不能为空";
  } else if (password.length < 8 || password.length > 20) {
    passwordInput.classList.remove("valid");
    passwordInput.classList.add("invalid");
    passwordTip.innerHTML = "密码长度必须介于8到20个字符之间";
  } else if (!/^\w+$/.test(password)) {
    passwordInput.classList.remove("valid");
    passwordInput.classList.add("invalid");
    passwordTip.innerHTML = "密码只能由字母、数字和下划线组成";
  } else {
    passwordInput.classList.remove("invalid");
    passwordInput.classList.add("valid");
    passwordTip.innerHTML = "";
  }
  checkFormValidity();
}

// 检查确认密码是否和密码一致
function checkConfirmPassword() {
  var password = passwordInput.value;
  var confirmPassword = this.value;
  if (confirmPassword === "") {
    confirmPasswordInput.classList.remove("valid");
    confirmPasswordInput.classList.add("invalid");
    confirmPasswordTip.innerHTML = "确认密码不能为空";
  } else if (password !== confirmPassword) {
    confirmPasswordInput.classList.remove("valid");
    confirmPasswordInput.classList.add("invalid");
    confirmPasswordTip.innerHTML = "两次输入的密码不一致";
  } else {
    confirmPasswordInput.classList.remove("invalid");
    confirmPasswordInput.classList.add("valid");
    confirmPasswordTip.innerHTML = "";
  }
  checkFormValidity();
}

// 检查邮箱地址是否合法
function checkEmail() {
  var email = this.value.trim();
  if (email === "") {
    emailInput.classList.remove("valid");
    emailInput.classList.add("invalid");
    emailTip.innerHTML = "邮箱不能为空";
  } else if (!/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(email)) {
    emailInput.classList.remove("valid");
    emailInput.classList.add("invalid");
    emailTip.innerHTML = "邮箱地址不合法";
  } else {
    emailInput.classList.remove("invalid");
    emailInput.classList.add("valid");
    emailTip.innerHTML = "";
  }
  checkFormValidity();
}

// 检查表单是否通过验证
function checkFormValidity() {
  if (usernameInput.classList.contains("valid") &&
    passwordInput.classList.contains("valid") &&
    confirmPasswordInput.classList.contains("valid") &&
    emailInput.classList.contains("valid")) {
    form.querySelector("button[type='submit']").disabled = false;
  } else {
    form.querySelector("button[type='submit']").disabled = true;
  }
}

至此，用 JavaScript 制作 QQ 注册动态页面的攻略就介绍完了。希望以上内容能对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：用javascript制作qq注册动态页面 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月15日
下一篇 2023年6月15日

相关文章

  • 学习Java的Date、Calendar日期操作

    针对学习Java的Date、Calendar日期操作的完整攻略，可以从以下几个方面展开讲解： 1. Date类介绍 java.util.Date类是Java中处理日期和时间的一个类，它提供了一些方法可以帮助你操作日期和时间。它包含从1970年1月1日开始的毫秒数，并可以将这个毫秒数转换为日期和时间。 // 获取当前时间 Date date = new Dat…

    Java 2023年6月1日
    00

  • 详解JSONObject和JSONArray区别及基本用法

    详解JSONObject和JSONArray区别及基本用法 1. JSONObject和JSONArray是什么？ 在Java中，JSONObject和JSONArray都是JSON格式数据的提供者。 JSONObject对象表示一个JSON对象，即类似于{ “name”: “张三”, “age”: 18, “gender”: “male” }这样的数据结构…

    Java 2023年5月26日
    00

  • SpringSecurity从数据库中获取用户信息进行验证的案例详解

    下面将为您详细讲解Spring Security从数据库中获取用户信息进行验证的攻略。 什么是Spring Security Spring Security是一个功能强大、可高度定制的认证和授权框架，可用于保护基于Spring的Java应用程序。它提供了基于角色、用户和访问级别的身份验证和授权，以及多种身份验证选项，包括基本身份验证、OAuth和JWT等。 …

    Java 2023年5月20日
    00

  • Java中的Error有哪些？

    当我们在Java程序中遇到某些无法处理的错误或异常时，Java运行时会抛出一个Error对象，通常我们需要对其进行处理或捕获。在Java中，Error对象通常指的是那些阻止程序正常工作的严重错误或问题。下面是Java中Error的一些常见类型及其说明。 1. OutOfMemoryError OutOfMemoryError指的是程序在尝试使用更多内存时无法…

    Java 2023年4月27日
    00

  • 用Java实现聊天程序

    下面是用Java实现聊天程序的完整攻略： 步骤一：设计数据模型 聊天程序需要考虑所需的数据。这些数据可以包括消息、用户信息、聊天室信息等。在这个例子中，我们需要设计一个名为Message的类来表示聊天消息。这个类应该包含发送者和接收者的ID、消息内容和发送时间等信息。 public class Message { private int senderId; …

    Java 2023年5月19日
    00

  • Form表单按回车自动提交表单的实现方法

    当用户在表单中输入完数据并按下回车键时，可以通过JavaScript实现自动提交表单。下面是一些实现方法： 方法1：jQuery实现 如果你正在使用jQuery库，可以使用以下代码实现表单自动提交： $(document).on("keydown", "form input", function (event) { i…

    Java 2023年6月15日
    00

  • Java中解密微信加密数据工具类

    Java中解密微信加密数据工具类 – 完整攻略 对于开发微信小程序的开发者而言，解密微信加密数据是一个重要的任务。为了提供更好的开发体验，我们可以利用Java来解密微信加密数据，本文将详细讲解Java中解密微信加密数据的完整攻略。 前置条件 在开始讲解如何在Java中解密微信加密数据之前，我们需要做好以下几个前置条件： 在微信官方平台上注册自己的小程序，并获…

    Java 2023年5月23日
    00

  • 深入了解Java I/O 之File类

    深入了解Java I/O 之File类 File类的作用 在Java I/O中，File类被用来表示一个文件或目录的路径名。虽然这个类的名字是File，但它实际上只是一个路径名的抽象表示。File类的实例代表的是一个文件或目录的路径，而不是实际上的文件或目录。 File类的常见操作 File类提供了一组重要的方法来操作文件和目录。下面列出了您可能会经常使用的…

    Java 2023年6月1日
    00
合作推广
合作推广
分享本页
返回顶部