沃梦达 / 编程技术 / 编程语言 / Java开发 / 正文

用javascript制作qq注册动态页面

Java开发
2023-12-16

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

下面是用 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注册动态页面

上一篇： jsp中一个页面引入另一个页面的实现代码
下一篇： AngularJS使用ng-inlude指令加载页面失败的原因与解决方法

基础教程推荐

学习HTML
学习jQuery
学习Laravel
学习CSS3
学习Vue.js
学习Bootstrap5
学习ThinkPHP
学习AJAX
猜你喜欢
最新文章
热门文章
编程基础
热门标签
网站首页 HTML/CSS 菜单 Layui Yii2