BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码

首先我们需要了解什么是Bootstrap和FormValidation。

Bootstrap是一套开源的前端框架，主要用于快速开发响应式、移动设备优先的Web项目。Bootstrap内置了丰富的CSS和JavaScript组件，提供了常见的页面布局、表单、按钮等元素，整个框架使用起来非常便利。

FormValidation是一款基于Bootstrap的表单验证插件，可以用于验证各种类型的表单输入，如文本框、下拉框、复选框等，并提供了丰富的验证规则，例如非空、正则表达式、长度等。

现在我们开始讲解如何调整FormValidation的反馈图标位置。

我们知道，在FormValidation中，如果出现验证失败的情况，会在相应的表单控件旁边显示一个反馈图标，用以提示错误信息。默认情况下，这个图标是显示在表单控件的右侧，而有时候我们希望将其放在表单控件的底部或左侧，以适应页面的布局。

下面是一个简单的示例说明如何将反馈图标放在表单控件的底部。

1. 准备工作

在网页中引入相关的css和js文件。具体可以参考Bootstrap和FormValidation的官方文档。

<!-- 引入Bootstrap和FormValidation的css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.8.1/css/formValidation.min.css">

<!-- 引入jQuery和Bootstrap的js -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- 引入FormValidation的js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.8.1/js/formValidation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.8.1/js/framework/bootstrap.min.js"></script>

1. 设置反馈图标位置

在表单验证的配置参数中，添加一个onSuccess和onError的回调函数，用来设置反馈图标的位置。具体设置方法如下：

$(document).ready(function() {
  $('#demoForm')
    .formValidation({
      // 表单验证规则和提示信息
      fields: {
        firstName: {
          validators: {
            notEmpty: {
              message: 'The first name is required'
            }
          }
        }
      }
    })
    .on('success.validator.fv', function(e, data) {
      // 验证成功时，将反馈图标添加到表单底部
      data.element
        .data('fv.icon')
        .appendTo(data.element.parent().parent('.form-group'));
    })
    .on('err.validator.fv', function(e, data) {
      // 验证失败时，将反馈图标添加到表单底部
      data.element
        .data('fv.icon')
        .appendTo(data.element.parent().parent('.form-group'));
    });
});

这里我们通过.on()函数监听formValidation的success.validator.fv和err.validator.fv事件，当验证成功或失败时，分别将反馈图标添加到表单控件的底部。

1. 给表单控件添加底部容器

为了让反馈图标能够显示在表单控件的底部，需要额外添加一个底部容器。可以在表单控件的外层包裹一个div，然后给这个div添加一个.form-group类。具体代码如下：

<form id="demoForm" method="post">
  <div class="form-group">
    <label>First name</label>
    <input type="text" class="form-control" name="firstName" placeholder="First name">
  </div>

  <!-- 其他表单控件... -->

  <button type="submit" class="btn btn-primary">Submit</button>
</form>

这样，在验证成功或失败时，反馈图标就会显示在底部容器的最下方。

除了放在表单控件的底部外，还可以将反馈图标放在左侧或右侧，具体方法可以参考FormValidation官方文档中的示例代码。

以上就是实现FormValidation调整反馈图标位置的方法，希望能对你有所帮助。