Material Design 输入框验证方法：Floating Label、Error Binding 和 Error Feedback-JavaScript中文网-JavaScript教程资源分享门户

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 判断输入内容是否符合要求，如果不符合，则在浮动标签上添加一个错误提示。示例代码如下：

// javascriptcn.com 代码示例
<div class="mdl-textfield mdl-js-textfield">
  <input class="mdl-textfield__input" type="text" id="username">
  <label class="mdl-textfield__label" for="username">Username</label>
  <span class="mdl-textfield__error">Invalid username</span>
</div>

<script>
  var input = document.getElementById('username');
  var label = input.previousSibling;
  var error = input.nextSibling;

  input.addEventListener('input', function() {
    if (input.value.length < 6) {
      label.classList.add('is-invalid');
      error.style.display = 'block';
    } else {
      label.classList.remove('is-invalid');
      error.style.display = 'none';
    }
  });
</script>

在这个示例中，我们先在浮动标签后面添加了一个 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 时，我们需要在输入框的下方显示一个错误提示，并实时更新其中的内容。示例代码如下：

// javascriptcn.com 代码示例
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-textfield--expandable mdl-textfield--floating-label-expandable">
  <label class="mdl-button mdl-js-button mdl-button--icon" for="search">
    <i class="material-icons">search</i>
  </label>
  <div class="mdl-textfield__expandable-holder">
    <input class="mdl-textfield__input" type="text" id="search" pattern="[a-zA-Z0-9]{6,}">
    <label class="mdl-textfield__label" for="search">Search (at least 6 characters)</label>
    <span class="mdl-textfield__error">Invalid search query</span>
  </div>
</div>

<script>
  var input = document.getElementById('search');
  var error = input.nextSibling;

  input.addEventListener('input', function() {
    if (input.validity.patternMismatch) {
      error.innerHTML = 'Invalid search query: must be at least 6 characters';
      error.style.display = 'block';
    } else {
      error.style.display = 'none';
    }
  });
</script>

在这个示例中，我们使用了 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