时间戳

首页 > 解决方案 > 在 JavaScript 中验证信用卡，使用循环遍历表单字段名称，出现错误

javascript - 在 JavaScript 中验证信用卡，使用循环遍历表单字段名称，出现错误

问题描述

为班级解决问题。需要按照以下说明进行信用卡验证：

您正在开始自己的信用卡业务。您提出了一种验证信用卡的新方法，该方法使用一个名为 validateCreditCard 的简单函数，该函数返回 true 或 false。

以下是有效号码的规则：

数字必须是 16 位数字，所有数字必须是数字 必须至少有两个不同的数字表示（所有数字不能相同） 最后一位数字必须是偶数 所有数字的总和必须大于 16

以下信用卡号有效：

9999-9999-8888-0000

6666-6666-6666-1666

以下信用卡号无效：

您将需要创建一个 Web 表单，允许您的用户输入信用卡号码并在更改时验证信用卡是否有效并向用户显示相应的消息。

提示：在检查输入的信用卡号是否有效之前，从输入字符串中删除破折号。（查看 split() 和 join() 方法。

加5分：返回一个表示信用卡是否有效的对象，如果不有效，错误是什么 { valid: true, number: 'a923-3211-9c01-1112' } { valid: false, number: 'a923- 3211-9c01-1112'，错误：'错误长度'}

并适当显示。

额外5分：让您的信用卡计划更高级！规则是什么，通过或失败的数字有哪些？思路：查看有效期！查看 Luhn 算法（链接到外部站点。）链接到外部站点。寻找灵感。

这是我的html：

<!DOCTYPE>
<html>
    <head>
        <title>Credit Card Validation</title>
        <!--Lisa Hergert's Extra Credit 1-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="extraCredit.js"></script>
    </head>
    <body>
        <form name = "newForm">
            <label for = "creditCard1">Card Number</label>
            <input type = "text" name = "creditCard1" id = "creditCard1" placeholder = "XXXX-XXXX-YYYY-AAAA"
            onChange = "validateCreditCard()" /><br />
            <label for = "creditCard2">Card Number</label>
            <input type = "text" name = "creditCard2" id = "creditCard2" placeholder = "XXXX-XXXX-YYYY-AAAA"
            onChange = "validateCreditCard()" /><br />
            <label for = "creditCard3">Card Number</label>
            <input type = "text" name = "creditCard3" id = "creditCard3" placeholder = "XXXX-XXXX-YYYY-AAAA"
            onChange = "validateCreditCard()" /><br />
            <label for = "creditCard4">Card Number</label>
            <input type = "text" name = "creditCard4" id = "creditCard4" placeholder = "XXXX-XXXX-YYYY-AAAA"
            onChange = "validateCreditCard()" /><br />
            <label for = "creditCard5">Card Number</label>
            <input type = "text" name = "creditCard5" id = "creditCard5" placeholder = "XXXX-XXXX-YYYY-AAAA"
            onChange = "validateCreditCard()" /><br />
            <label for = "creditCard6">Card Number</label>
            <input type = "text" name = "creditCard3" id = "creditCard3" placeholder = "XXXX-XXXX-YYYY-AAAA"
            onChange = "validateCreditCard()" /><br />
        </form>
    </body>
</html>

这是我的javascript（代码未注明日期）：

/**
* validCardNumber tests that Credit Card Number is XXXX-XXXX-YYYY-AAAA
* X, Y and A must only be digits
*/

    function validateCreditCard () {
    for (var i = 1; i < 7; i++) {
        var cardNumber = document.getElementById("creditCard" + i);

        var pattern = new RegExp("[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{3}[24680]{1}");
        var res = pattern.test(cardNumber);

        if (res) {
            document.getElementById("message").style.color = 'green';
            document.getElementById("message").innerHTML = "Card Number is Valid";
            document.getElementById("creditCard" + i).style.color = "green";
        } else {
            document.getElementById("message").style.color = 'red';
            document.getElementById("message").innerHTML = "Card Number is NOT valid";
            document.getElementById("cardCard" + i).style.color = 'red';
        }
    }
}

我正在尝试用 i 创建一个循环，这样就不用做一长串变量来引用不同的表单字段：creditCard1...2...3 等。

我收到此错误：

extraCredit.js:10 Uncaught TypeError: Cannot read property '1' of undefined
    at validateCreditCard (extraCredit.js:10)
    at HTMLInputElement.onchange (creditCardValidation.html:13)

有一个更好的方法吗？

使用更新的代码出现新错误：

extraCredit.js:22 Uncaught TypeError: Cannot read property 'style' of null
    at validateCreditCard (extraCredit.js:22)
    at HTMLInputElement.onchange (creditCardValidation.html:14)

标签： javascript

解决方案

你得到的错误是因为document.newForm.creditCard不存在。尝试从中获取[1]然后失败并显示错误消息。有几种方法可以解决这个问题：

使用括号表示法来访问它。我认为这是您的意图，但您有点错过了-正确的语法是document.newForm["creditCard" + i]. 注意周围的引号creditCard- 您需要一个字符串"creditCard" + i并将生成"creditCard1","creditCard2"等。

使用 DOM 查找方法。在这种情况下，最简单的可能是getElementById()- 语法是document.getElementById("creditCard" + i)- 想法与以前相同 - 您需要创建 strings "creditCard1"，"creditCard2"依此类推并基于此查找元素。您需要更改线路document.getElementById("creditCard[i]").style.color = "green";并document.getElementById("creditCard[i]").style.color = "red";遵守此规则。

作为参考，还有另一种方法可以找到这些元素，而不是直接通过 ID。您可以使用其他 DOM 搜索方法并将它们基于不同的事物。例如，如果您像这样向每个输入标签添加一个类，<input type = "text" class = "creditCard" ... />那么您将能够使用getElementsByClassName()（注意复数 - 元素s）。这将返回所有匹配元素的列表，您可以for再次使用循环对其进行迭代，例如

var creditCardInputs = document.getElementsByClassName("creditCard");

for (var i = 0; i < creditCardInputs.length; i++) { //note that you start at zero instead of one
    var creditCardNumber = creditCardInputs[i].value; 
    /* process this number further */
}

推荐阅读