Bootstrap5使用bootstrapValidator完成表单验证（包括解决样式、图标不显示及其他组件表单验证出问题解决方案）

以下都为个人实践。

CND引入bootstrap5及bootstrapValidator文件

bootstrap5
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rTTiRUKnSWaDu2FjhzWFl8/JuUZMlplyWE/djenb2LoKqkgLGfEGfSrL7XDLoB1M" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-Nj1D6pu2WnJojj+67GiU9ZFNwbl7bUWX5Kj5MS22C8bGjllemM9pvQyvj14zJb58" crossorigin="anonymous"></script>

bootstrapValidator
<script type="text/javascript" src="http://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>

bootstrap5表单样式及结构

表单样式结构需用form标签包裹，div需添加form-group类来包裹label及input框，input框添加form-control类，input框绑定一个name值，后面需要靠name值来添加表单验证规则。我这里使用了栅栏布局来进行表单自适应。

<form class="forms">
	<div class="row form-group">
	  <div class="col-12 col-lg-5">
	    <label for="name"><span style="color: red;">*</span> 收件人</label>
	  </div>
	  <div class="col-12 col-lg-7 position-relative">
	    <input type="text" class="form-control" placeholder="请输入姓名" id="name" name="uname" v-model="addresseeForm.name">
	  </div>
	</div>
	<div class="row form-group">
	  <div class="col-12 col-lg-5">
	    <label for="mobile"><span style="color: red;">*</span> 手机号码</label>
	  </div>
	  <div class="col-12 col-lg-7 position-relative">
	    <input type="text" class="form-control" placeholder="请输入手机号码" id="mobile" name="mobile" v-model="addresseeForm.mobile">
	  </div>
	</div>
	<div class="row form-group">
	  <div class="col-12 col-lg-5">
	    <label for="email" style="padding-left: 12px;">邮箱地址</label>
	  </div>
	  <div class="col-12 col-lg-7 position-relative">
	    <input type="text" class="form-control" placeholder="请输入邮箱" id="email" name="email" v-model="addresseeForm.email"> 
	  </div>
	</div>
<form class="tables">

引入bootstrapValidator

在vue的mounted生命周期钩子里添加了Jquery代码，通过$(“.forms”)绑定表单，feedbackIcons是用来显示验证是否通过时来显示对应的正确与错误图标，通过fields来添加验证，如下所示。

    $(function () {
      $(".forms").bootstrapValidator({
        excluded: [":disabled"],
        message: '表单校验',
        feedbackIcons: {
          valid: 'bi bi-check-lg',
          invalid: 'bi bi-x-lg',
          validating: 'bi bi-arrow-repeat'
        },
        fields: {
          uname:{
            message: "name字段校验",
            trigger:"change",
            validators: {
                notEmpty: {
                    message: '用户名不能为空'
                },
                regexp: {
                  regexp:/^[\u4e00-\u9fa5]+$/,
                  message: '只能输入汉字'
                },
                stringLength: {/*长度提示*/
                    max: 16,
                    message: '用户名不能超过16个字符'
                }
            }
          },
          mobile:{
            message: "mobile字段校验",
            trigger:"change",
            validators: {
              notEmpty: {
                message: '手机号码不能为空'
              },
              regexp: {
                regexp:/^1[3456789]\d{9}$/,
                message: '手机号码格式错误'
              },
            }
          },
          email: {
            message: "email字段校验",
            trigger:"change",
            validators: {
              emailAddress: {
                message: '邮箱格式错误'
              }
            }
          },
          area: {
            message: "area字段校验",
            trigger:"change",
            validators: {
              notEmpty: {
                message: '所在地区不能为空'
              }
            }
          },
          address: {
            message: "address字段校验",
            trigger: "change",
            validators: {
              notEmpty: {
                message: '详细地址不能为空'
              },
              stringLength: {/*长度提示*/
                max: 50,
                message: '详细地址不能超过50个字符'
              }
            }
          },
          default: {

          }
        }
      });
      $('.forms').on('success.form.bv', function(e) {
        // 完成通过验证才会调用
        e.preventDefault();//取消submit默认提交效果
        $('.forms').bootstrapValidator('resetForm', true);	清空表单验证
        $('.forms')[0].reset(); //表单置空
	   });
    });

完成表单验证了，但是样式并没有bootstrap3那么好看

icon图标没出现，颜色框没变化，影响用户体验，bootstrapValidator是适用于bootstrap3的，但是项目必须只可以用bootstrap5，然后打开开发者模式，审查元素，当我们发起提交时，验证失败或者成功的表单，在form-group类上添加一个has-error（验证失败）或者has-success（验证成功），因为我是打算提高样式美观的，所有我就通过css来做处理了，让它变漂亮，增加input颜色样式

.has-error .form-control{
  border-color: red;
}

.has-success .form-control{
  border-color: rgb(19,135,82);
}

icon图标未显示，那我就引入b5的icon文件，然后添加icon类

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">

如何让icon图标显示在input框右边？审查元素，i标签显示icon图标的父盒子div添加了一个相对定位，
因为i标签都有一个form-control-feedback类，所有我在它css加了个绝对定位，子绝父相，完成。

	  <div class="col-12 col-lg-7 position-relative">
	    <input type="text" class="form-control" placeholder="请输入手机号码" id="mobile" name="mobile" v-model="addresseeForm.mobile">
	  </div>

i.form-control-feedback {
  position: absolute;
  top: 9px;
  right: -12px;
}

后面我还遇到在这添加elementui的级联选择器时，表单验证监听失败问题，发现存在这类问题，继续是审查元素，因为我在组件里面添加表单验证类并没加进去，我就要Jquery加进去了，发现里面值变化时表单验证也出现错误，那我就添加事件，使用表单验证的响应事件change，dispatchEvent去调用它。

      $("input.el-input__inner").attr('id','area');
      $("input.el-input__inner").attr('name','area');
      $("input.el-input__inner").attr('class', 'form-control el-input__inner');
      $("input.el-input__inner").focus(function () {
        // 输入框获取焦点
      }).blur(function () {
        setTimeout(() => {
          // 调用表单验证的change事件
          $(".el-input__inner")[0].dispatchEvent(new Event('change'))