Material Design 是 Google 推出的一种设计语言，它强调设计的直观性、可读性和美观性，同时也提供了一些实用的组件和技术来帮助开发者实现这些目标。其中，输入框是一个非常重要的组件，它的验证方法也是一个需要注意的问题。本文将介绍 Material Design 中的三种输入框验证方法：Floating Label、Error Binding 和 Error Feedback，并给出相应的示例代码。
1. Floating Label
Floating Label 是 Material Design 中的一个基本概念，它指的是在输入框上方显示一个浮动标签，当用户输入内容时，标签会浮动到输入框内部，以便用户更清楚地知道自己正在输入什么内容。在验证方面，Floating Label 提供了以下两种方式：
1.1. 直接使用 HTML5 的 required 属性
HTML5 规范中提供了一个 required 属性，可以让浏览器在提交表单时自动验证输入框是否为空。使用 Floating Label 时，我们可以直接在 input 标签中添加 required 属性来实现验证，如下所示：
<div class="mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" type="text" id="username" required> <label class="mdl-textfield__label" for="username">Username</label> </div>
1.2. 使用 JavaScript 实现自定义验证
除了直接使用 required 属性外，我们还可以使用 JavaScript 实现自定义的验证。在使用 Floating Label 时，我们可以监听 input 标签的 input 事件，当用户输入内容时，通过 JavaScript 判断输入内容是否符合要求，如果不符合，则在浮动标签上添加一个错误提示。示例代码如下：
-- -------------------- ---- -------
---- -------------------- ------------------
------ ---------------------------- ----------- --------------
------ ---------------------------- -------------------------------
----- ------------------------------------ ---------------
------
--------
--- ----- - ------------------------------------
--- ----- - ----------------------
--- ----- - ------------------
------------------------------- ---------- -
-- ------------------- - -- -
----------------------------------
------------------- - --------
- ---- -
-------------------------------------
------------------- - -------
-
---
---------在这个示例中，我们先在浮动标签后面添加了一个 span 元素，用来显示错误提示。然后，我们使用 JavaScript 监听 input 事件，当用户输入内容时，判断输入内容是否符合要求（这里的要求是用户名的长度必须大于等于 6），如果不符合，则在浮动标签上添加一个 is-invalid 类，同时显示错误提示；否则，移除 is-invalid 类，同时隐藏错误提示。
2. Error Binding
Error Binding 是一种更加直观的输入框验证方式，它可以让浮动标签在验证失败时自动变成错误状态，并显示相应的错误提示。在使用 Error Binding 时，我们需要将输入框和错误提示绑定在一起，示例代码如下：
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-textfield--error">
<input class="mdl-textfield__input" type="text" id="username" pattern="[a-zA-Z0-9]{6,}">
<label class="mdl-textfield__label" for="username">Username (at least 6 characters)</label>
<span class="mdl-textfield__error">Invalid username</span>
</div>在这个示例中，我们使用了 pattern 属性来指定输入框的内容必须符合正则表达式 [a-zA-Z0-9]{6,}，即只能包含字母和数字，且长度必须大于等于 6。同时，我们将输入框和错误提示都包裹在了一个 div 元素中，并添加了 mdl-textfield--floating-label 和 mdl-textfield--error 两个类，分别表示使用 Floating Label 和 Error Binding。
在这个示例中，当用户输入内容不符合要求时，浮动标签会自动变成错误状态，并显示相应的错误提示，如下图所示：
3. Error Feedback
Error Feedback 是一种更加细致的输入框验证方式，它可以在用户输入内容时即时给出反馈，让用户更加清楚地知道自己输入的内容是否符合要求。在使用 Error Feedback 时，我们需要在输入框的下方显示一个错误提示，并实时更新其中的内容。示例代码如下：
-- -------------------- ---- -------
---- -------------------- ---------------- ----------------------------- ------------------------- ------------------------------------------
------ ----------------- ------------- ----------------- -------------
-- ---------------------------------
--------
---- -----------------------------------------
------ ---------------------------- ----------- ----------- --------------------------
------ ---------------------------- ------------------- --- ----- - -------------------
----- ------------------------------------ ------ ------------
------
------
--------
--- ----- - ----------------------------------
--- ----- - ------------------
------------------------------- ---------- -
-- -------------------------------- -
--------------- - -------- ------ ------ ---- -- -- ----- - ------------
------------------- - --------
- ---- -
------------------- - -------
-
---
---------在这个示例中，我们使用了 pattern 属性来指定输入框的内容必须符合正则表达式 [a-zA-Z0-9]{6,}，即只能包含字母和数字，且长度必须大于等于 6。同时，我们使用了 mdl-textfield--expandable 和 mdl-textfield--floating-label-expandable 两个类，表示输入框可以展开，并使用了 Floating Label。在展开后，我们在输入框下方添加了一个 span 元素，用来显示错误提示。然后，我们使用 JavaScript 监听 input 事件，当用户输入内容时，判断输入内容是否符合要求，如果不符合，则实时更新错误提示的内容，并显示出来；否则，隐藏错误提示。
在这个示例中，当用户输入内容不符合要求时，错误提示会实时更新，并显示出来，如下图所示：
总结
以上就是 Material Design 中的三种输入框验证方法：Floating Label、Error Binding 和 Error Feedback。在实际开发中，我们可以根据具体的需求选择适合的方法来实现输入框的验证。其中，Floating Label 是最基本的验证方式，适用于简单的验证场景；Error Binding 可以让浮动标签自动变成错误状态，适用于需要更直观的验证场景；Error Feedback 可以实时更新错误提示的内容，适用于需要更细致的验证场景。希望本文能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65712c4bd2f5e1655d9ddf09