如何实现关闭jQuery Confirm弹窗后输入框边框变红及输入时恢复绿色

我仔细看了你的代码，发现几个导致功能失效的关键点，下面给你修正后的完整实现，同时解释每个修改的原因：

问题排查 #

1. 样式优先级不足：Bootstrap的.form-control自带的边框样式优先级比你自定义的.add类高，所以红色边框无法正常显示
2. 缺少输入时的绿色样式逻辑：原代码只移除了红色类，但没有添加绿色边框的样式
3. 小细节：提示文案里的enterThis应该是enter this，影响用户体验

修正后的完整代码 #

CSS部分

/* 提高优先级，确保覆盖Bootstrap默认样式 */
.form-control.add {
  border-color: #FF0000 !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6) !important;
}

/* 输入时的绿色边框样式 */
.form-control.valid {
  border-color: #28a745 !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(40, 167, 69, 0.6) !important;
}

JavaScript部分

$("#save").on('click', function() {
  const $numberInp = $('#numberInp'); // 缓存DOM元素，提升性能
  if ($numberInp.val().trim() == '') { // 用trim()处理空格情况
    $.alert({
      title: 'Alert!',
      content: 'Please enter this field', // 修正文案拼写
      buttons: {
        specialKey: {
          text: 'Ok',
          keys: ['enter'],
          action: function() {
            // 这里可以留空，弹窗会自动关闭
          }
        },
      },
      onDestroy: function() {
        $numberInp.focus();
        // 移除可能存在的valid类，添加错误样式类
        $numberInp.removeClass('valid').addClass('add');
      }
    });
    return false;
  }
})

$(document).on("keyup", "#numberInp", function(e) {
  const $this = $(this);
  // 移除错误样式，添加有效样式
  $this.removeClass('add').addClass('valid');
  // 如果用户又清空输入，可以选择恢复错误样式（可选）
  // if ($this.val().trim() === '') {
  //   $this.removeClass('valid').addClass('add');
  // }
});

HTML部分（补充图标依赖）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<!-- 添加Font Awesome，否则按钮图标无法显示 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2">
  <label for="numberInp">Number</label>
  <div class="input-group">
    <input type="tel" class="form-control" aria-label="Text input with dropdown button" name="numberInp" id="numberInp">
  </div>
</div>
<button type="button" id="save" class="commonButton">
  <i class="fa fa-print"></i>&nbsp;save
</button>

关键修改说明 #

1. 样式优先级优化：通过.form-control.add组合选择器加上!important，确保自定义样式能覆盖Bootstrap的默认样式
2. 添加绿色样式类：新增.valid类实现输入时的绿色边框效果
3. DOM元素缓存：把$('#numberInp')缓存到变量中，减少重复DOM查询，提升性能
4. 输入验证优化：用trim()处理输入空格的情况，避免用户输入空格被误认为有效内容
5. 样式状态管理：在弹窗销毁时，确保移除有效样式类，只保留错误样式；输入时则相反
6. 补充Font Awesome：原代码中使用了fa fa-print图标，但没有引入Font Awesome资源，导致图标无法显示，这里补充了引用

内容的提问来源于stack exchange，提问作者vivek singh