Question

我有一个有效的促销代码列表，例如["one","two","three"] 我有一个名为促销代码的输入字段，用户可以在其中输入促销代码（如果有的话）。

当用户输入的匹配列表中的某个项目时，我们应该执行X。如果用户输入的内容不与列表中的项目匹配，则我们应该输入Y。

有效的代码：

JS：

    function checkPromo() {
        var promoCodes = [{% for code in promo_codes %} "{{code}}", {% endfor %}];
        var arrayLength = promoCodes.length;
        var enteredCode = document.getElementById('promoCode').value;
        var message = document.getElementById('formErrorMessage');

        for (var i = 0; i < arrayLength; i++) {
            if (enteredCode == promoCodes[i]) {
                message.innerHTML = '<br /><p class="promoMessageValid">Your promo code is valid!</p>';
            } 
        }                                                             
    }

HTML：

<form>
    ...                                                             
    <div class="row">
        <div class="field half-width">
            <input type="text" placeholder="Promo Code" class="input empty" id="promoCode" maxlength="8" oninput="checkPromo()">
            <label for="promo">Promo Code</label>
            <div class="baseline"></div>
        </div>
    </div>                                                         
    ...                                                            
    <div class="error field" role="alert">
        <span class="message" id="formErrorMessage"></span>
    </div>                                          
</form>

无效的代码：

JS：

function checkPromo() {
    var promoCodes = [{% for code in promo_codes %} "{{code}}", {% endfor %}];
    var arrayLength = promoCodes.length;
    var enteredCode = document.getElementById('promoCode').value;
    var message = document.getElementById('formErrorMessage');

    for (var i = 0; i < arrayLength; i++) {
        if (enteredCode == promoCodes[i]) {
            message.innerHTML = '<br /><p class="promoMessageValid">Your promo code is valid!</p>';
        } else if (enteredCode == '') {
            message.innerHTML = '';
        } else {
            message.innerHTML = '<br /><p class="promoMessageInvalid">Your promo code is invalid';
        }
  }
}

两种情况下的HTML都相同。

无法正常工作的代码未完全损坏；它正确显示“您的促销代码无效”。当促销代码输入为空时，它还会更改“ formErrorMessage”以显示一个空字符串。但是，当输入的促销代码与有效促销代码之一匹配时，它不会注册。

我在做什么错了？

谢谢！

Answer 1

如果您发现与输入匹配的有效promoCode，则应该break，否则您的“有效”结果可能会被覆盖。您的代码将显示“您的促销代码有效！” 仅（如果输入代码是promoCodes数组中的最后一个）。

执行此操作的另一种方法，而无需显式循环（从而避免这种覆盖）：

if (!enteredCode) {
  message.innerHTML = '';
} else if (promoCodes.includes(enteredCode)) {
  message.innerHTML = '<br /><p class="promoMessageValid">Your promo code is valid!</p>';
} else {
  message.innerHTML = '<br /><p class="promoMessageInvalid">Your promo code is invalid';
}

或者，如果您不喜欢promoCodes.indexOf(enteredCode) >= 0，请选择includes。我想是为了实现MSIE兼容性。

话虽这么说

用户可以输入他们的促销代码（如果有的话）

如果不应该所有人都知道这些“促销代码”，您可能希望将它们保存在服务器上并从那里检查有效性，然后不将其发送给客户端：只需显示源即可免费找到优惠券代码。

javascript形式的oninput实时输入验证无法按预期工作

1 个答案: