表单校验需求：input1与input2值相等则提交否则触发popover权限提示

你使用的是Bootstrap的popover组件，使用前请确保页面已正确引入对应依赖：

• Bootstrap 4/5 核心CSS文件
• Popper.js（Bootstrap 5已内置，使用Bootstrap 4需额外引入）
• Bootstrap 核心JS文件

原生JS + Bootstrap 5 实现代码 #

document.addEventListener('DOMContentLoaded', function() {
  // 获取DOM元素
  const targetForm = document.querySelector('form[action="action.php"]');
  const input1 = document.getElementById('input1');
  const input2 = document.getElementById('input2');
  const triggerBtn = document.querySelector('button[data-toggle="popover"]');

  // 初始化popover，设置为手动触发
  const popoverInstance = new bootstrap.Popover(triggerBtn, {
    trigger: 'manual',
    placement: 'top'
  });

  // 绑定按钮点击事件
  triggerBtn.addEventListener('click', function() {
    const val1 = input1.value.trim();
    const val2 = input2.value.trim();

    if (val1 === val2) {
      // 输入值相等，提交表单
      targetForm.submit();
    } else {
      // 输入值不等，修改popover标题后弹出
      popoverInstance._config.title = "You don't have permission";
      popoverInstance.show();
      // 3秒后自动隐藏弹出框，可根据需要调整时长或删除该逻辑
      setTimeout(() => {
        popoverInstance.hide();
      }, 3000);
    }
  });
});

jQuery + Bootstrap 4 实现代码 #

如果你使用的是Bootstrap 4版本，可直接用以下代码：

$(function() {
  // 初始化popover
  $('button[data-toggle="popover"]').popover({
    trigger: 'manual'
  });

  // 绑定按钮点击事件
  $('button[data-toggle="popover"]').click(function() {
    const val1 = $('#input1').val().trim();
    const val2 = $('#input2').val().trim();
    if (val1 === val2) {
      $('form[action="action.php"]').submit();
    } else {
      $(this).attr('data-original-title', "You don't have permission").popover('show');
      // 3秒后自动隐藏
      setTimeout(() => {
        $(this).popover('hide');
      }, 3000);
    }
  });
});

之前代码不生效的常见原因 #

• 未手动初始化popover：Bootstrap的popover不会自动初始化，必须手动调用初始化代码才会生效
• 未设置trigger: 'manual'：默认的hover/click触发逻辑会和自定义点击事件冲突，导致弹出逻辑异常
• 未处理输入值前后空格：用户输入时可能意外输入空格，导致肉眼相同的内容被判断为不等

内容的提问来源于stack exchange，提问作者Doru Bolboceanu