oninput 的 javascript 表单实时输入验证未按预期工作

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 兼容性。

话虽这么说:

users can input their promo code, if they have one

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