显示表单 <progress>

假设您有一个表单，其中包含 10 个必填字段。这比互联网上普通表单要大一些，对用户来说也是一项不小的工作。您可能会在此过程中失去一些用户，这绝非好事。也许为了鼓励用户完成表单，您可以让他们知道离完成还有多远，并在过程中显示激励信息。

1. 必填输入的 HTML

对于此演示，输入不一定需要是 required，但这使得演示更简洁。填写可选字段不会使您更接近提交表单的最低要求。因此，对于此演示，我们将使用 5 个必填字段来创建一个收集付款信息的典型表单。

<form id="payment-form" action="#">
  
   <label for="name">Full Name</label>
   <input required id="name" name="name">

   <!-- etc -->

</form>

2. 进度条的 HTML

有一个 HTML 元素专门用于可视化显示进度。确切地说，是 <progress>。让我们准备一个这样的元素（带有 ID，以便 JavaScript 能够轻松地定位它）。将其放置在您想要的位置。

<progress max="100" value="0" id="progress"></progress>

将 max 属性设置为 100 可以简化计算。进度条的填充程度与其值的百分比相同。例如，value="20" == 进度条填充了 20%。

3. 监视变化

我们将在这里使用 jQuery 来简化事件绑定和元素选择。我们这里的所有输入都将是文本类型的，因此键盘事件相关。所以……

$("#payment-form input").keyup(function() {
  
  // calculate progress

});

4. 统计有效输入的数量

任何特定输入在其当前状态下是否有效，现在都是 DOM 的一部分。一旦我们获得了指向它的指针，我们只需检查 this.validity.valid 是否为真或假。

var numValid = 0;
$("#payment-form input[required]").each(function() {
    if (this.validity.valid) {
        numValid++;
    }
});

5. 调整进度条/显示消息

现在我们有了多少个输入有效的整数，我们只需设置一些基本的逻辑来调整进度条的当前值。

在这里，我们还可以显示激励信息。也许页面上的某个位置有一个 <p> 元素，我们有一个指向它的指针（progressMessage），我们只需调整其中的文本以匹配进度。

// "Cached" somewhere once
var progress = $("#progress"),
    progressMessage = $("#progressMessage");

// Logic that runs after counting every time
if (numValid == 0) {
    progress.attr("value", "0");
    progressMessage.text("The form, it wants you.");
}
if (numValid == 1) {
    progress.attr("value", "20");
    progressMessage.text("There you go, great start!");
}

浏览器支持

如果浏览器支持是一个问题，您可能需要首先运行一个小的 Modernizr 测试。如果通过，则加载脚本、注入元素，或者您想如何处理它。

if (Modernizr.input.required) {

  // Modernizr.load, inject elements, whatever.

}

如果您需要更多帮助，请 阅读这篇文章。

CodePen 上的演示

您可以随意 使用它。