Logo

菜单

发布于 2026-01-05 7 阅读
0

学习 JavaScript 表单验证 || JavaScript 入门项目✨ HTML 添加 CSS 休息一下！ 添加 JavaScript 添加社交媒体按钮 添加图片 添加移动版媒体查询 总结 DEV 全球展示挑战赛 由 Mux 呈现：展示你的项目！

学习 JavaScript 表单验证 || 适合初学者的 JavaScript 项目✨

HTML

添加 CSS

休息一下！

添加 JavaScript

添加社交媒体按钮

添加图片

为移动版本添加媒体查询

结论

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

今天我们将学习如何使用 JavaScript 进行表单验证。我们还会添加图片和媒体查询，最终完成一个完整的项目，作为我们的作品集展示。以下是我们即将构建的项目演示👇

替代文字

以下是表单使用方法的一个小示例👇

替代文字

如果你愿意，也可以在 YouTube 上观看这个教程：

源代码

您可以从这里获取源代码，包括图片。

设置

替代文字

请按照以下步骤操作👇

  • 创建一个名为“Project”的新文件夹并打开VS Code
  • 创建 index.html、style.css 和 main.js 文件。
  • 在HTML文件中链接文件。
  • 从我的 GitHub 仓库下载图片
  • 将此 Font Awesome 链接粘贴到 <head> 标签内。然后，我们就可以访问 Font Awesome 图标了👇
<link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
      crossorigin="anonymous"
    />
Enter fullscreen mode Exit fullscreen mode

目录 -

  • 编写HTML
  • 添加 CSS
  • JavaScript
  • 社交媒体按钮
  • 添加图片
  • 移动版媒体查询

替代文字

HTML

替代文字

在 body 标签内创建一个名为 .container 的类，并将 id 为 form 的表单标签放入其中👇

<div class="container">

    <form id="form"></form>

</div>
Enter fullscreen mode Exit fullscreen mode

在表单标签内，创建 4 个 div 元素。像这样👇

<form id="form">

    <div class="title">Get Started</div>

    <div></div>
    <div></div>
    <div></div>

</form>
Enter fullscreen mode Exit fullscreen mode

在这三个空的 div 标签内，我们创建三个输入框 [用户名、邮箱和密码]，以及相应的图标和标签。就像这样👇

注意：我们创建了一个名为 .error 的类名。我们将使用 JavaScript 在此处注入错误消息。

用户名输入

<!-- User Name input -->

<div>
    <label for="username">User Name</label>
    <i class="fas fa-user"></i>

    <input
        type="text"
        name="username"
        id="username"
        placeholder="Joy Shaheb"
     />

    <i class="fas fa-exclamation-circle failure-icon"></i>
    <i class="far fa-check-circle success-icon"></i>

    <div class="error"></div>

</div>
Enter fullscreen mode Exit fullscreen mode

电子邮件输入

<!-- Email input -->

<div>
    <label for="email">Email</label>
    <i class="far fa-envelope"></i>

    <input
        type="email"
        name="email"
        id="email"
        placeholder="abc@gmail.com"
     />

    <i class="fas fa-exclamation-circle failure-icon"></i>
    <i class="far fa-check-circle success-icon"></i>

    <div class="error"></div>

</div>
Enter fullscreen mode Exit fullscreen mode

密码输入

<!--   Password input -->

<div>
    <label for="password">Password</label>
    <i class="fas fa-lock"></i>

    <input
        type="password"
        name="password"
        id="password"
        placeholder="Password here"
     />

    <i class="fas fa-exclamation-circle failure-icon"></i>
    <i class="far fa-check-circle success-icon"></i>

    <div class="error"></div>

</div>
Enter fullscreen mode Exit fullscreen mode

按钮

最后，在表单结束标签之前添加按钮。

<form>
    <!-- other codes are here -->

    <button id="btn" type="submit">Submit</button>

</form>
Enter fullscreen mode Exit fullscreen mode

目前的结果👇

替代文字

恭喜你完成 HTML 部分！🍾🎉🥂

替代文字

添加 CSS

替代文字

让我们添加 CSS 来设置表单样式。首先，我们移除浏览器的默认样式，包括字体系列👇

/**
* ! changing default styles of brower
**/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

现在，将这些样式应用于表单标签

/**
* ! style rules for form section
**/

form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 400px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  padding: 50px;
}
Enter fullscreen mode Exit fullscreen mode

请对标题文本进行以下更改👇👇

.title {
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 20px;
}
Enter fullscreen mode Exit fullscreen mode

你目前的结果👇👇

替代文字

现在，给标签文本的底部添加边距。

label {
  display: block;
  margin-bottom: 5px;
}
Enter fullscreen mode Exit fullscreen mode

使用这些样式来改变输入标签的外观和风格👇👇

form div input {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  outline: none;
  border: 2px solid #c4c4c4;
  padding: 0 30px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
Enter fullscreen mode Exit fullscreen mode

添加这些元素可以增加一些空间和颜色变化效果。

form div {
  position: relative;
  margin-bottom: 15px;
}

input:focus {
  border: 2px solid #f2796e;
}
Enter fullscreen mode Exit fullscreen mode

目前的结果👇👇

替代文字

图标样式

现在，我们要给从 Font Awesome 导入的图标添加样式。一起来看看吧✨✨

/**
* ! style rules for form icons
**/

form div i {
  position: absolute;
  padding: 10px;
}
Enter fullscreen mode Exit fullscreen mode

添加这两行代码后的结果如下👇👇

替代文字

现在，添加以下样式来设置错误类、成功和失败图标的样式👇👇

.failure-icon,
.error {
  color: red;
}

.success-icon {
  color: green;
}

.error {
  font-size: 14.5px;
  margin-top: 5px;
}
Enter fullscreen mode Exit fullscreen mode

目前结果👇👇

替代文字

你看，成功和失败图标重叠了。别担心，我们会用 JavaScript 来处理它们。现在，先把它们隐藏起来👇👇

.success-icon,
.failure-icon {
  right: 0;
  opacity: 0;
}
Enter fullscreen mode Exit fullscreen mode

现在，请像这样设置提交按钮的样式👇

/* Style rules for submit btn */

button {
  margin-top: 15px;
  width: 100%;
  height: 45px;
  background-color: #f2796e;
  border: 2px solid #f2796e;
  border-radius: 8px;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.1s ease;
}
Enter fullscreen mode Exit fullscreen mode

如果你想要一些悬停效果，那么当然可以，添加这些样式👇👇

button:hover {
  opacity: 0.8;
}
Enter fullscreen mode Exit fullscreen mode

休息一下！

目前一切顺利！休息一下吧，你值得拥有！

替代文字

添加 JavaScript

替代文字

首先，在 JavaScript 中获取 HTML 中的所有类名和 ID。为了高效地完成这项任务，请编写以下两个函数👇👇

let id = (id) => document.getElementById(id);

let classes = (classes) => document.getElementsByClassName(classes);
Enter fullscreen mode Exit fullscreen mode

然后，将我们的类名和 ID 存储在以下变量中👇

let username = id("username"),
  email = id("email"),
  password = id("password"),
  form = id("form"),

  errorMsg = classes("error"),
  successIcon = classes("success-icon"),
  failureIcon = classes("failure-icon");
Enter fullscreen mode Exit fullscreen mode

注意：请尽量避免拼写错误。否则，我们的 JavaScript 将无法正常运行。

现在，我们要定位到表单并添加提交事件监听器👇

form.addEventListener("submit", (e) => {
  e.preventDefault();
});
Enter fullscreen mode Exit fullscreen mode

现在，我们将创建一个名为 engine 的函数，它将为我们完成所有表单验证工作。它将有 3 个参数。请继续往下看👇

let engine = (id, serial, message) => {}
Enter fullscreen mode Exit fullscreen mode

这些论点代表了以下内容——

  • id = 它将定位到我们的 id
  • serial = 这将针对我们的类 [错误类、成功和失败图标]
  • message = 这将在我们的 .error 类中打印消息

现在创建一个类似这样的 if, else 语句👇

let engine = (id, serial, message) => {

  if (id.value.trim() === "") {
  }

  else {
  }
}
Enter fullscreen mode Exit fullscreen mode

注意： `id.value.trim()` 会移除用户输入值中的所有多余空格。您可以参考下图来更好地理解其工作原理👇

替代文字

现在，看看我们的目标👇

  • 我们希望当用户提交空白表单时，JavaScript 能在错误类中打印一条消息。同时，我们也希望失败图标能够高亮显示。

  • 但是，如果用户输入了所有信息并提交，我们希望显示成功图标。

为了实现这一点，请编写以下逻辑👇 以打印消息

let engine = (id, serial, message) => {

  if (id.value.trim() === "") {
    errorMsg[serial].innerHTML = message;
  }

  else {
    errorMsg[serial].innerHTML = "";
  }
}
Enter fullscreen mode Exit fullscreen mode

为了使图标正常工作，请添加以下内容👇👇

let engine = (id, serial, message) => {

  if (id.value.trim() === "") {
    errorMsg[serial].innerHTML = message;
    id.style.border = "2px solid red";

    // icons
    failureIcon[serial].style.opacity = "1";
    successIcon[serial].style.opacity = "0";
  }

  else {
    errorMsg[serial].innerHTML = "";
    id.style.border = "2px solid green";

    // icons
    failureIcon[serial].style.opacity = "0";
    successIcon[serial].style.opacity = "1";
  }
}
Enter fullscreen mode Exit fullscreen mode

是时候实现我们新创建的函数了。请将以下代码写入我们添加提交事件监听器的地方👇

在这里，我们传递了 id 名称、类名的序列号，以及当用户提交表单时发现错误时应该打印的消息。

form.addEventListener("submit", (e) => {
  e.preventDefault();

  engine(username, 0, "Username cannot be blank");
  engine(email, 1, "Email cannot be blank");
  engine(password, 2, "Password cannot be blank");
});
Enter fullscreen mode Exit fullscreen mode

目前的结果如下👇

替代文字

添加社交媒体按钮

替代文字

目前一切顺利，接下来我们添加社交媒体注册选项。请看以下步骤👇 在表单标签内，创建一个类名为 social 的新 div 元素。

<form id="form">

    <div class="social">

      <div class="title">Get Started</div>

      <div class="question">
        Already Have an Account? <br />
        <span>Sign In</span>
      </div>

      <div class="btn"></div>

      <div class="or">Or</div>
    </div>

    <!-- other codes are here-->
</form>
Enter fullscreen mode Exit fullscreen mode

在 .btn 类内部，我们创建了两个类名为 .btn-1 和 .btn-2 的 div，分别用于放置图片和文本。

<div class="btn">
  <div class="btn-1">
     <img src="https://img.icons8.com/color/30/000000/google-logo.png" />
     Sign Up
  </div>

  <div class="btn-2">
    <img src="https://img.icons8.com/ios-filled/30/ffffff/facebook-new.png" />
     Sign Up
   </div>
</div>
Enter fullscreen mode Exit fullscreen mode

目前的结果👇👇

替代文字

现在，我们先来设置 .btn-1 和 .btn-2 的样式，把按钮的方向从列方向改为行方向👇

/**
* ! style rules for social section
**/

.btn {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 15px;
}
Enter fullscreen mode Exit fullscreen mode

目前结果

替代文字

现在，为按钮添加样式。请看下方步骤👇

.btn-1,
.btn-2 {
  padding: 10px 5px;
  width: 100%;
  display: flex;
  gap: 15px;
  justify-content: center;
  align-items: center;
  border: 2px solid #c4c4c4;
  border-radius: 8px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode

像这样更改 .btn-2 的图标颜色和文本颜色👇

.btn-2 {
  background-color: #4f70b5;
  color: white;
}
Enter fullscreen mode Exit fullscreen mode

然后，添加这些小改动，使组件看起来更好。

.or {
  text-align: center;
}

.question {
  font-size: 15px;
}

span {
  color: #f2796e;
  cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode

目前的结果

替代文字

添加图片

替代文字

现在，让我们向项目中添加图片。首先，我们来编写 HTML 代码👇

<div class="container">

      <div class="content">
        <div class="logo">
          <img src="https://svgshare.com/i/_go.svg" alt="" />
        </div>

        <div class="image"></div>

        <div class="text">
          Start for free & get <br />
          attractive offers today !
        </div>
      </div>

   <form id="form">
   <!--other codes are here -->
   </form>

</div>
Enter fullscreen mode Exit fullscreen mode

目前的结果👇

替代文字

我们需要将内容的排列方向从列改为行。请看下方👇

.container {
  display: flex;
  flex-direction: row;
}
Enter fullscreen mode Exit fullscreen mode

为内容部分添加以下样式规则

/**
* ! style rules for content section
**/

.content {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background-color: #f2796e;
  width: 55%;
  min-height: 100vh;
  padding: 10px 20px;
}

form {
   width: 45%;
   max-width: none;
}
Enter fullscreen mode Exit fullscreen mode

目前的结果👇

替代文字

在 CSS 中添加主图

.image {
  background-image: url("https://svgshare.com/i/_gZ.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* border: 2px solid black; */
  height: 65%;
}
Enter fullscreen mode Exit fullscreen mode

并为 .text 类创建这些样式

.text {
  text-align: center;
  color: white;
  font-size: 18px;
}

form {
   width: 45%;
   max-width: none;
}
Enter fullscreen mode Exit fullscreen mode

目前的结果👇

替代文字

为移动版本添加媒体查询

替代文字

从 900px 开始，我们将添加这些样式。请继续往下看👇👇

@media (max-width: 900px) {
  .container {
    flex-direction: column;
  }

  form,
  .content {
    width: 100%;
  }

  .btn {
    flex-direction: column;
  }
  .image {
    height: 70vh;
  }
}
Enter fullscreen mode Exit fullscreen mode

从 425px 开始，我们将进行以下细微更改👇

@media (max-width: 425px) {
  form {
    padding: 20px;
  }
}
Enter fullscreen mode Exit fullscreen mode

最终结果👇👇
替代文字

结论

替代文字

恭喜你读到最后！现在你可以轻松高效地使用 JavaScript 处理表单验证了。不仅如此，你还可以向本地招聘人员展示你的项目成果！

这是你读到最后的奖牌❤️

非常感谢您的建议和批评❤️

替代文字

文章来源：https://dev.to/joyshaheb/learn-javascript-form-validation-javascript-project-for-beginners-2mm5
终极 CSS 对决：Grid vs...
AI 生成的 Git 提交消息