如何实现HTML中基于API正则匹配的按钮禁用及数据验证

我来帮你把这些需求完整整合到现有代码里，以下是分步实现方案，完全贴合你的要求：

1. 从本地API加载正则表达式（含降级方案） #

首先我们要在页面初始化时从指定API获取正则，失败时使用你提供的默认正则并弹出提示：

let validationRegex = null;

$(document).ready(function() {
  // 从API获取正则表达式
  $.ajax({
    url: 'http://localhost:8080/setlabel/project/instance/oldvalue/newvalue',
    method: 'GET',
    success: function(response) {
      if (response.status === 'OK') {
        // 加载API返回的正则
        validationRegex = new RegExp(response.regex);
        console.log('正则表达式加载成功');
        checkRegexAndUpdateButton(); // 加载完成后立即校验状态
      } else {
        handleRegexLoadFail();
      }
    },
    error: function() {
      handleRegexLoadFail();
    }
  });

  // 正则加载失败的降级处理
  function handleRegexLoadFail() {
    alert('未找到');
    // 使用需求中指定的默认正则
    validationRegex = new RegExp('(start|stop)-(ed|f|m|s|su|t|th|w|wd)-([1-9]|1[0-2])_([0-5][0-9])(?i)(am|pm)-(cst|est|mst|pst)');
    checkRegexAndUpdateButton();
  }
});

2. 按钮状态控制（关机按钮默认禁用，匹配正则后启用） #

先修改按钮HTML，区分启动/关机按钮并默认禁用关机按钮：

<div class="btn-group btn-group-sm" role="group">
  <!-- 1A 启动按钮 -->
  <button data-name="{{.Name}}" data-zone="{{.Zone | baseUrl}}" data-set-action="start" type="button" class="btn btn-primary btn-sets" data-loading-text="<i class='fa fa-spinner fa-spin'></i> Processing">启动项目</button>
  <!-- 2A 关机按钮，默认禁用 -->
  <button data-name="{{.Name}}" data-zone="{{.Zone | baseUrl}}" data-set-action="stop" type="button" class="btn btn-danger btn-sets" data-loading-text="<i class='fa fa-spinner fa-spin'></i> Processing" disabled>关机</button>
</div>

然后添加监听逻辑，实时校验用户生成值并更新按钮状态：

// 校验正则并更新关机按钮状态
function checkRegexAndUpdateButton() {
  if (!validationRegex) return;

  // 替换为你实际获取用户选择生成值的方式（比如输入框/下拉框的值）
  const userGeneratedValue = $('#target-value-input').val();
  const isMatch = validationRegex.test(userGeneratedValue);
  
  // 匹配成功则启用关机按钮，否则保持禁用
  $('button[data-set-action="stop"]').prop('disabled', !isMatch);
}

// 监听用户选择变化（替换为实际触发值变化的元素选择器）
$('#user-selection-dropdown').on('change', checkRegexAndUpdateButton);

3. 按钮点击时的验证与动作执行 #

修改现有按钮点击事件，添加正则校验逻辑：

$('.btn-sets').on('click', function() {
  const $this = $(this);
  const action = $this.data('set-action');

  // 关机按钮必须先通过正则校验
  if (action === 'stop') {
    if (!validationRegex) {
      alert('正则未加载完成，无法执行关机');
      return;
    }
    const userGeneratedValue = $('#target-value-input').val();
    if (!validationRegex.test(userGeneratedValue)) {
      alert('格式不符合要求，请检查后重试');
      return;
    }
  }

  // 启动加载状态
  $this.button('loading');

  // 模拟异步操作（替换为实际的启停API请求）
  setTimeout(function() {
    $this.button('reset');
    if (action === 'start') {
      console.log('执行启动项目逻辑');
      // 这里添加启动项目的API调用
    } else if (action === 'stop') {
      console.log('执行关机逻辑');
      // 这里添加关机的API调用
    }
  }, 8000);
});

4. 结合现有标签验证代码的行级校验 #

修改现有表格代码，为验证通过/失败的行添加样式（可选）：

<style>
.valid-row { background-color: #d4edda; } /* 验证通过行绿色背景 */
.invalid-row { background-color: #f8d7da; } /* 验证失败行红色背景 */
</style>

<tbody data-label-validation="{{labelValidation}}">
  {{range .Instances}}
  <tr data-generated-value="{{.GeneratedValue}}"> <!-- 存储该行的生成值 -->
    <td>{{.Name}}</td>
    <td>{{.Type | baseUrl}}</td>
    <td>{{.Zone | baseUrl}}</td>
    <td>{{template "startup.html" .}}</td>
    <td>{{template "startup.html" .}}</td>
    <td>
      <button type="button" class="btn {{.Status | statusButtonClass}} btn-circle" data-toggle="popover" data-placement="right" data-content="{{.Status}}" data-trigger="hover">
      </button>
    </td>
    <td><h6>$0.00</h6></td>
  </tr>
  {{end}}
</tbody>

添加前端行级校验逻辑：

// 页面加载完成后校验所有行的格式
$(document).ready(function() {
  setTimeout(function() { // 延迟执行确保正则已加载
    if (!validationRegex) return;
    $('tbody[data-label-validation] tr').each(function() {
      const rowValue = $(this).data('generated-value');
      const isValid = validationRegex.test(rowValue);
      $(this).toggleClass('valid-row', isValid).toggleClass('invalid-row', !isValid);
    });
  }, 1000);
});

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