在开发 Web 应用程序时，输入验证是一个重要的步骤。它有助于确保用户提交的数据是有效和可用的，在数据实际被使用之前进行了正确的格式化和校验。随着谷歌 Material Design 的广泛采用，输入验证已成为更加重要的方面之一，因为它可以使 UI 体验更为统一和规范。本文将介绍 Material Design 中的输入验证，以及如何在您的项目中实现。
Material Design Validator 的特点
Material Design Validator 有两个主要特点：实时验证和反馈机制。
实时验证意味着输入框中的内容在用户输入时就会接受验证，而不是等到提交表单后才进行验证。这种验证方式可以帮助用户更好地理解他们输入的数据是否符合规范。实时验证通常使用 JS 来实现，它会检查某个输入域中的数据格式是否符合特定的要求。
反馈机制是指当用户输入数据格式错误时，Material Design Validator 会提供相应的反馈机制来告诉用户错误的原因和如何更正它们。这些反馈机制通常包括错误文本、文本颜色定位以及指示输入域周围红色圆圈的颜色。
Material Design Validator 的实现
Material Design Validator 可以直接使用谷歌提供的 Materialize CSS 框架来实现。Materialize CSS 是一个强大的框架，提供了许多组件和可重复使用的样式表。下面是使用 Materialize CSS 实现输入验证的一些示例：
简单的实时验证
对于最简单的实时验证，您可以使用 HTML 中的 required 属性来确保输入框不为空。例如：
<input type="text" name="name" required>
这会在输入框为空时自动添加验证器，并在 submit 按钮被点击时验证表单数据。
自定义验证器
如果需要更复杂的验证条件，您可以使用 Materialize CSS 提供的自定义验证器。例如：
<input type="text" name="password" data-validation="length" data-validation-length="min8" data-validation-error-msg="密码太短了哦" />
这将检查密码输入是否至少为8个字符长，如果不满足要求，将会添加一个错误消息，并将输入框红色框定位。
实时验证与反馈
要实现实时验证和反馈，在 Materialize CSS 中，您需要在输入框中使用 JS 事件。在下面的示例中，当用户对输入框进行输入时，JS 将检查输入数据是否符合预期的格式，并根据结果提供反馈：
-- -------------------- ---- -------
---- ------------------ --- ----
------ ---------- ------------ ---------------- ---------
------ -------------------------
----- ------------------- -------------------- -----------------------------
------
--------
---------------------------- -
--------------- ------------------------------
---------------------------- ---------- -
-- ------------------------------------ -
------------------------------------------ ---------
- ---- -
---------------------------------------- ----------
-
--
---
---------这将检查输入的数据是否为有效的电子邮件地址，并根据结果向用户提供反馈。
总结
Material Design Validator 是有效的输入验证方案之一，可以帮助开发人员确保他们的表单数据是有效和可用的。它可以通过实时验证和反馈机制帮助用户更加友好地输入数据，并使 UI 体验更为规范。本文简要介绍了 Material Design Validator 的特点和实现，以及如何使用 Materialize CSS 实现输入验证。希望这篇文章能够对前端工程师有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c32a9383d39b488171db90