Bootstrap 4-alpha6：自定义文件控制验证反馈

Question

我在表单中实现了新的自定义文件控件，看起来很棒。有没有人想出如何（如果）验证反馈可以应用（成功，警告，带图标的危险状态）？

（如果它还没有实现，我不会感到惊讶或失望，特别是因为BS4仍处于alpha状态。我只想澄清它是否在那里，我只是想念它。）

澄清点：我指的是：https://v4-alpha.getbootstrap.com/components/forms/#file-browser。我已多次浏览文档，但出于某种原因我要么缺少某些内容，要么自定义文件控件尚未启用上下文验证样式？

示例：

<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>

这没有按预期格式化，也没有关于验证格式选项的任何文档。以下是结果的图像，URL字段按预期格式化，自定义文件字段不是：

Answer 1

修改

对于file input，你需要额外的JS，如Docs中所述

  

文件输入是最粗糙的，需要额外的   JavaScript，如果你想用功能性选择文件将它们连接起来......   和选定的文件名文本。

基本上与在V3中的方法相同，为元素添加类。

检查Documentation是否为bootstrap V4 alpha

  

如何运作

     

以下是它们如何运作的概述：

     

  
• 要使用，请将.has-warning，.has-danger或.has-success添加到父元素。任何.col-form-label，.form-control或自定义表单   element将收到验证样式。
  
• 除了通常的表单字段帮助文本外，还可以使用.form-control-feedback添加上下文验证文本。这个   文本将适应父.has-*类。默认情况下它只是   包括一些间距的边距和每个的修改颜色   状态。
  
• 验证图标是通过Sass变量配置的url（），这些变量应用于每个州的背景图像声明。
  
• 您可以通过更新Sass变量并重新编译来使用您自己的base64 PNG或SVG。
  
• 通过将变量设置为none或注释掉源Sass，也可以完全禁用图标。
  

查看documentation

上的示例

<强>段

.custom-file-control::after {
  content: "Choose file...";
}

.custom-file-control::before {
  content: "Browse";
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group has-success">
  <label class="form-control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control form-control-success" id="inputSuccess1">
  <div class="form-control-feedback">Success! You've done it.</div>
  <small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
<div class="form-group has-warning">
  <label class="form-control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control form-control-warning" id="inputWarning1">
  <div class="form-control-feedback">Shucks, check the formatting of that and try again.</div>
  <small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
<div class="form-group has-danger">
  <label class="form-control-label" for="inputDanger1">Input with danger</label>
  <input type="text" class="form-control form-control-danger" id="inputDanger1">
  <div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
  <small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>

<label class="custom-file">
  <input type="file" id="file" class="custom-file-input">
  <span class="custom-file-control"></span>
</label>

Answer 2

您可以使用JavaScript将验证类添加到输入中。文档是：http://v4-alpha.getbootstrap.com/components/forms/#validation

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

.has-danger

.has-warning

.has-success