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

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

阅读全文

精选内容

相关推荐

    暂无