jQuery代金券码重复校验失效：带空格的重复码未触发告警

问题根源 #

当前的核心问题是：粘贴带前导/尾随空格的重复代金券码时，前端AJAX校验无法检测到重复，后端直接存入了带空格的无效码。原因在于前端未对输入值做去空格处理，传给后端的是带空格的字符串，而后端校验采用精确匹配逻辑，导致 red和数据库中已有的red被判定为不同值，校验通过后后端又未处理空格就完成存储，最终出现实际重复的有效代金券码。

修复步骤 #

1. 前端jQuery代码修改 #

在获取输入值后立即去除前后空格，同时将处理后的值写回输入框，确保用户看到的也是无空格的最终内容：

$(document).on('input paste focusout', '#voucherCode', function() {
  // 去除输入值的前后空格
  var inputValue = $.trim($(this).val());
  // 将处理后的值写回输入框，消除残留空格
  $(this).val(inputValue);
  
  // 若处理后为空，提前禁用提交按钮（可选，根据业务需求调整）
  if(!inputValue) {
    $(".delButtonSpac").attr('disabled',true);
    return;
  }

  $.ajax({
    url: 'update.cfm?action=checkcode',
    method: 'POST',
    data: { voucherCode: inputValue },
    success: function(response) {
      var r = $.trim(response);
      var chkTrue = (r === 'exists');
      if (chkTrue) {
        swal({
            title: "Hmm!",
            text: "Voucher Code already exists",
            type: "warning"
        });
        $(".delButtonSpac").attr('disabled',true);
      } else {
        $(this).addClass('valid').removeClass('error');
        $(".delButtonSpac").attr('disabled',false);
      }
    },
    error: function() {
      $(".verror").css('display','block').html('Error occurred during AJAX call');
    }
  });
});

2. 后端ColdFusion代码（update.cfm）加固 #

前端处理可能被绕过（比如直接调用接口），因此后端必须强制做去空格处理，形成双重保障：

• 校验重复逻辑：

<cfif action eq "checkcode">
  <cfset voucherCode = trim(form.voucherCode)>
  <!--- 使用去除空格后的码去数据库匹配 --->
  <cfquery name="chkVoucher" datasource="yourDSN">
    SELECT COUNT(*) AS codeCount
    FROM vouchers
    WHERE voucherCode = <cfqueryparam cfsqltype="cf_sql_varchar" value="#voucherCode#">
  </cfquery>
  <cfif chkVoucher.codeCount gt 0>
    <cfoutput>exists</cfoutput>
  <cfelse>
    <cfoutput>available</cfoutput>
  </cfif>
</cfif>

• 存储代金券码逻辑：

<cfif action eq "saveVoucher">
  <cfset voucherCode = trim(form.voucherCode)>
  <!--- 存储时仅保留去除空格后的有效码 --->
  <cfquery name="saveVoucher" datasource="yourDSN">
    INSERT INTO vouchers (voucherCode, ...)
    VALUES (<cfqueryparam cfsqltype="cf_sql_varchar" value="#voucherCode#">, ...)
  </cfquery>
</cfif>

关键说明 #

• 前端trim后写回输入框：让用户直观看到最终提交的内容，避免产生误解。
• 后端强制trim：从根源上杜绝前端校验被绕过的情况，确保数据库中不会存入带空格的无效代金券码。

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