Html 引导4-alpha6：自定义文件控件验证反馈

我已经在表单中实现了新的自定义文件控件，它看起来很棒。是否有人知道如何（以及是否）应用验证反馈（成功、警告、带有图标的危险状态）

（如果它还没有实现，我不会感到惊讶或失望，特别是因为BS4仍在alpha中。我只想澄清它是否存在，我只是错过了它。）

澄清点：我指的是：。我已经阅读了很多次文档，但是由于某种原因，或者我遗漏了一些东西，或者自定义文件控件没有启用上下文验证样式

示例：

<div class="form-group row has-danger">
  <label for="file1" class=" col-sm-3 col-form-label">File Input</label>
  <div class="col-sm-9">
    <div class="custom-file" style="display: block;">
      <input class="custom-file-input" name="file1" type="file">
      <span class="custom-file-control form-control-danger"></span>
    </div>
    <small class="form-control-feedback">The file1 field is required.</small>
  </div>
</div>

文件输入
file1字段是必需的。

这与预期的格式不符，似乎也没有任何关于验证格式选项的文档。以下是结果的图像，URL字段格式与预期一致，而自定义文件字段格式与预期不同：

---

您可以使用JavaScript向输入添加验证类。文件如下：

简而言之，您可以添加的类是

.has-danger

.has-warning

.has-success

编辑

如文档中所述，您需要额外的JS

文件输入是最粗糙的，需要额外的 JavaScript，如果您想将它们与函数选择文件连接起来… 和选定的文件名文本

---

基本上与在V3中所做的相同，将类添加到元素中

检查引导V4 alpha的

工作原理 以下是它们的工作原理：

• 若要使用，请将

  .has warning

  、

  has danger

  或

  has success

  添加到父元素。任何

  .col表单标签

  ，

  .form控件

  ，或自定义表单 元素将接收验证样式
• 除了通常的表单字段帮助文本外，还可以使用

  。表单控制反馈
  添加上下文验证文本。这
  文本将适应父类
  .has-*
  类。默认情况下，它只是
  包括一点间距边距和修改的颜色
  国家

• 验证图标是通过Sass变量配置的url（），Sass变量应用于每个状态的背景图像声明
• 通过更新Sass变量并重新编译，您可以使用自己的base64 PNG或SVG
• 还可以通过将变量设置为“无”或注释掉源SAS来完全禁用图标

---

请参见其上的示例

片段

.custom file control:：after{
内容：“选择文件…”；
}
.custom文件控件：：之前{
内容：“浏览”；
}

成功地投入
成功！你做到了。
保持不变的示例帮助文本。
带警告的输入
嘘，检查该文件的格式，然后重试。
保持不变的示例帮助文本。
危险输入
抱歉，该用户名已被占用。再来一杯？
保持不变的示例帮助文本。

Hi@dippas，谢谢您的回答。不幸的是，我没有把这个问题说清楚。这不是关于如何对普通字段进行验证格式化，而是特定于自定义文件控件。我已相应地更新了问题。不过，感谢您的全面回复。：）@mike.bronner为此，您需要额外的JS，如文档

中所述，文件输入是最粗糙的，如果您想将其与功能选择文件…和选择的文件名文本连接起来，则需要额外的JavaScript。

您介意更新您的答案以反映这一点吗，我会把它标记为答案：）谢谢！嗨，约翰，不幸的是这不是我想要的。我可能没有把这个问题说得足够清楚。我已经用一个示例和屏幕截图更新了这个问题。应该注意的是，由于这个问题，Bootstrap 4 final已经出炉，并且对自定义文件输入和验证类都进行了突破性的更改。