又双叒叕 Material Design 新手实践之验证输入框

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

Material Design 是 Google 推出的一种设计语言，并在移动端及网站界面设计领域掀起了一股浪潮。它注重一种简单、自然、直观的设计风格，并针对不同设备特性和交互方式进行了优化。其中，输入框是网页设计中的一个重要元素，在 Material Design 中有着极为重要的地位。对于想要入门 Material Design 的新手来说，验证输入框是一个很好的开端。

在本文中，我们将深入探讨 Material Design 验证输入框的设计与实践。我们将围绕验证输入框常见的功能进行讲解，并提供详细的示例代码，以帮助读者快速掌握验证输入框的设计方法和技巧。

验证输入框的功能

在 Material Design 中，验证输入框通常具有以下功能：

  1. 输入框自动聚焦；
  2. 输入框的边框颜色会改变，以表明当前输入框是否被填写正确；
  3. 点击输入框后出现提示信息；
  4. 错误信息提示。

验证输入框的实现

在 Material Design 中，验证输入框的实现需要依赖一些技术。下面我们将分别从 HTML、CSS 和 JavaScript 三个方面来讨论验证输入框的实现方法。

HTML 代码

首先，我们需要在 HTML 代码中设置一个输入框，示例如下：

---- ----------------
  ------ ---------------------------
  ------ ----------- ---------- ------------------- ----------
  ----- -----------------------------
------

以上代码使用了 Material Design 的相关 CSS 类，其中 md-form 类是 Material Design 中的一个表单容器，label 标签用于设置输入框的文字提示信息，input 标签用于设置输入框本身，validate 类用于标注该输入框需要验证，error-message 类用于设置错误信息提示。

CSS 代码

接下来，我们需要编写 CSS 代码来设置样式。下面是一个示例样式表：

-------- -
  --------- ---------
-

-------- ----- -
  ------- --- ----- -----
  -------------- ----
  ---------- -----
  -------- -----
  ------ -----
-

-------- ----------- -
  ------- --- ----- --------
  -------- -----
-

-------- ---------------------- -
  ------- --- ----- --------
-

-------- -------------------- -
  ------- --- ----- --------
-

-------- ----- -
  --------- ---------
  ---- -----
  ----- -----
  ---------- -----
  ------ -----
  ----------- --- ---- ---------
  --------------- -----
-

-------- ----------- - ------
-------- ----------- - ----- -
  ---- ----
  ----- ----
  ---------- -----
  ------ --------
-

-------- ---------------------- - ----- -
  ------ --------
-

-------- -------------------- - ----- -
  ------ --------
-

-------------- -
  -------- -----
  ------ --------
  ---------- -----
  ----------- ----
-

-------- -------------------- - -------------- -
  -------- ------
-

以上样式表中，我们为输入框设置了默认颜色、聚焦后的颜色、验证成功后的颜色、验证失败后的颜色以及提示文本的颜色等，同时配合了 JavaScript 代码来控制错误信息提示的显隐。

JavaScript 代码

最后，我们需要编写 JavaScript 代码来实现验证功能。下面是一个示例 JavaScript 代码：

---------------------------- -
  --------------------------------- -
    -----------------------------------------
  ---

  ---------------------------------- -
    -- --------------------- -- -- -
      --------------------------------------------
    -
  ---

  ------------------------ -------- ---------- -
    -- --------------------- -- -- -
      -------------------------------
      --------------------------
      --------------------------------------------
    -
    ---- -- --------------------- - - -- -------------------- - --- -
      -------------------------------
      --------------------------
      ---------------------------------------------------
    -
    ---- -
      -----------------------------
      ----------------------------
      ----------------------------------------
    -
  ---
---

以上 JavaScript 代码中，我们为输入框绑定了 focusin、focusout 和 input 事件，并在其内部写了验证逻辑。当输入框被聚焦时候，提示文本会移动到输入框顶部；当输入框失去焦点时候，若输入框值不为空则提示文本不变，否则回到原位。当输入框的内容改变时，通过判断输入框的值来判断其是否验证成功，并在其下方给出错误信息提示。

示例代码

最后，为了方便读者参考和使用，我们提供一个完整的示例代码。请读者复制并粘贴以下代码，保存在本地并打开网页进行测试。我们欢迎读者指出意见和建议。

--------- -----
------
------
  ----- ----------------
  ----- --------------- ---------------------------- -----------------
  --------------------
  ------- ----------------------------------------------------------------------------
  -------
    -------- -
      --------- ---------
    -

    -------- ----- -
      ------- --- ----- -----
      -------------- ----
      ---------- -----
      -------- -----
      ------ -----
    -

    -------- ----------- -
      ------- --- ----- --------
      -------- -----
    -

    -------- ---------------------- -
      ------- --- ----- --------
    -

    -------- -------------------- -
      ------- --- ----- --------
    -

    -------- ----- -
      --------- ---------
      ---- -----
      ----- -----
      ---------- -----
      ------ -----
      ----------- --- ---- ---------
      --------------- -----
    -

    -------- ----------- - ------
    -------- ----------- - ----- -
      ---- ----
      ----- ----
      ---------- -----
      ------ --------
    -

    -------- ---------------------- - ----- -
      ------ --------
    -

    -------- -------------------- - ----- -
      ------ --------
    -

    -------------- -
      -------- -----
      ------ --------
      ---------- -----
      ----------- ----
    -

    -------- -------------------- - -------------- -
      -------- ------
    -
  --------
-------
------
  --------------
  ---- ----------------
    ------ ---------------------------
    ------ ----------- --------- ------------------- ----------
    ----- -----------------------------
  ------
  ---- ----------------
    ------ ---------------------------
    ------ ------------ ---------- ------------------- ----------
    ----- -----------------------------
  ------
  ---- ----------------
    ------ ---------------------------
    ------ --------------- ------------- ------------------- ----------
    ----- -----------------------------
  ------
  --------
    ---------------------------- -
      --------------------------------- -
        -----------------------------------------
      ---

      ---------------------------------- -
        -- --------------------- -- -- -
          --------------------------------------------
        -
      ---

      -------------------- -------- ---------- -
        -- --------------------- -- -- -
          -------------------------------
          --------------------------
          --------------------------------------------
        -
        ---- -- --------------------- - - -- -------------------- - --- -
          -------------------------------
          --------------------------
          ---------------------------------------------------
        -
        ---- -
          -----------------------------
          ----------------------------
          ----------------------------------------
        -
      ---

      --------------------- -------- ---------- -
        -- --------------------- -- -- -
          -------------------------------
          --------------------------
          --------------------------------------------
        -
        ---- -- ----------------------------------------------------------------------------- -
          -------------------------------
          --------------------------
          -----------------------------------------------
        -
        ---- -
          -----------------------------
          ----------------------------
          ----------------------------------------
        -
      ---

      ------------------------ -------- ---------- -
        -- --------------------- -- -- -
          -------------------------------
          --------------------------
          --------------------------------------------
        -
        ---- -- --------------------- - - -- -------------------- - --- -
          -------------------------------
          --------------------------
          ---------------------------------------------------
        -
        ---- -
          -----------------------------
          ----------------------------
          ----------------------------------------
        -
      ---
    ---
  ---------
-------
-------

结论

通过本文的讲解，我们详细介绍了验证输入框在 Material Design 中的设计方法和技巧，并提供了示例代码来帮助读者快速掌握如何实现验证输入框。通过合理的编写 HTML、CSS 和 JavaScript 代码，可以使验证输入框具备更好的用户体验，提高网页的交互性。希望本文的内容对读者有所启发，有助于读者深入研究 Material Design 的相关知识。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/671b709c9babaf620fab8fe8

阅读全文

猜你喜欢

  • ES8 引入的新特性：异步迭代

    ES8（也称为 ECMAScript 2017）正式发布于 2017 年 6 月。其中最引人注目的新特性之一是异步迭代。本篇文章将深入介绍异步迭代的定义、优点和使用方法，以及如何在代码中使用它。

    17 天前
  • 实时大数据分析中 socket.io 技术的架构和应用

    实时大数据分析中 socket.io 技术的架构和应用 在现今互联网时代，实时数据分析已变得越来越重要，特别是对于大型互联网企业。而 socket.io 技术正是帮助我们实现实时数据处理和分析的有力工...

    17 天前
  • Material Design 中使用 NavigationView 的最佳实践

    简介 NavigationView 是 Material Design 中的一个重要组件，它提供了侧边导航菜单的功能，并且可以在菜单中显示不同的选项，同时也可以为每个选项设置监听器。

    17 天前
  • 使用 Chai.js 和 Mocha 进行 JavaScript 代码的端到端测试

    在前端开发中，测试是一个关键的部分。而端到端测试是一种测试方式，它可以模拟真实用户交互和真实场景，测试整个应用的运行状态，以确保应用在各种情况下都能够正常运行。在本文中，我们将介绍如何使用 Chai....

    17 天前
  • RxJS 实践：正确使用 interval 操作符定时更新数据

    随着前端开发框架的发展，越来越多的应用需要实时更新数据，以达到更好的用户体验。在这种情况下，拉取接口或者轮询服务器是必不可少的一部分。然而，频繁的请求可能会降低网站性能，而且还会浪费服务器资源。

    17 天前
  • 如何实现无障碍的 Web 拖拽效果？

    拖拽是 Web 应用中常用的交互方式。然而，针对视力或身体上有障碍的用户来说，通常需要特殊的技术支持才能实现无障碍的拖拽效果。在本文中，我们将介绍如何使用一些简单的技术来实现无障碍拖拽，并且让更多用户...

    17 天前
  • Mocha 和 Chai：测试 JavaScript 应用程序的最佳工具

    在前端开发中，测试是非常重要的一环，可以帮助我们提高代码的质量和稳定性。Mocha 和 Chai 是两个常用的 JavaScript 测试工具，很多前端开发者都在使用它们。

    17 天前
  • 在必应的搜索窗口 Tailwind CSS 风格没有工作

    在前端开发中，CSS 风格是非常重要的一部分。而 Tailwind CSS 是一个受欢迎的 CSS 框架，它允许开发人员快速地为项目添加样式，而无需编写自己的 CSS。

    17 天前
  • 使用 ESLint 进行代码风格检测

    什么是ESLint？ ESLint是一个代码风格检测工具，它可以扫描您的Javascript代码并帮助您检测问题，如错误的标点符号、不兼容的语法和不良的代码风格。ESLint非常有用，因为它可以帮助开...

    17 天前
  • 使用 Hapi 进行 Web 应用性能测试的方案探讨

    如果你正在开发一个 Web 应用程序并且很关心它的性能，那么你需要进行一些比较全面和详细的性能测试。性能测试可以让你了解您的应用程序如何在不同情况下响应，包括高负载、低网络速度等情况。

    17 天前
  • SASS @content 关键字的应用

    SASS @content 关键字的应用 在现代 Web 开发中，CSS 已经成为了一项不可或缺的技能。然而，CSS 往往需要写很多冗余的代码，这不仅浪费时间，而且还会让代码难以维护。

    17 天前
  • 如何在 Node.js 中使用 Passport.js 进行 OAuth 身份验证

    跨平台身份验证已成为现代Web应用程序中的重要组成部分。其中基于OAuth的身份验证是最为流行和安全的一种。作为一名前端开发人员，你可以使用 Passport.js 库轻松地实现OAuth身份验证。

    17 天前
  • 如何制作响应式表格

    在前端开发中，制作响应式表格是一项非常重要的任务。随着不同设备的屏幕大小和分辨率的不同，表格需要在不同设备上都有良好的展示效果。在本文中，我们将介绍一些制作响应式表格的最佳实践和技巧。

    17 天前
  • 如何解决 "Incorrectly formed event" 错误

    在前端开发中，我们常常会遇到 "Incorrectly formed event" 错误。这种错误通常出现在使用 JavaScript 处理事件的过程中，导致代码无法正常执行。

    17 天前
  • 基于 GraphQL 的数据校验技术探究

    引言 GraphQL 是一种通过 API 构建应用程序的查询语言。它允许客户端定义所需的数据形状和其要求，从而使得应用程序性能得到了提升。尽管 GraphQL 已经为开发人员提供了便利，但是在开发过程...

    17 天前
  • Redis 集群中的数据同步问题解决方法

    Redis 是一款高性能的缓存存储系统，广泛用于 Web 应用程序的数据处理和缓存。在分布式系统中，Redis 集群可以提供更高的可靠性和可用性。然而，在 Redis 集群中，当节点之间出现网络异常或...

    17 天前
  • MongoDB 数据库本地与远程访问设置方法

    简介 MongoDB 是一款以文档形式存储数据的 NoSQL 数据库，可以处理大量的数据。在前端开发中，MongoDB 也经常被使用。 本文将会介绍在前端开发中，如何设置 MongoDB 的本地与远程...

    17 天前
  • 解决 Docker 容器的时区问题

    Docker 是一个开源的应用容器引擎，可以帮助开发者更方便快捷地打包、发布和运行应用程序。但是，Docker 容器时区问题一直是扰乱开发者的一个难点。 在 Docker 容器中，时区默认为 UTC ...

    17 天前
  • Node.js 和 React.js 的快速入门指南

    前端技术日新月异，Node.js 和 React.js 已成为越来越受欢迎的两种技术。本文将为您提供有关它们的详细信息，包括入门指南、深度学习和指导意义，并提供示例代码。

    17 天前
  • Kubernetes 应用程序的服务发现原理详解

    前言 在分布式应用程序中，很难管理大量的服务，并保证它们的互联互通。而 Kubernetes 则提供了一种自动化的服务发现机制，使得可以方便地管理和发现应用程序中的服务。

    17 天前

相关推荐

    暂无文章