如何在 ReactJS 中验证信用卡号码？

当银行发行任何信用卡或借记卡号码时，它们不会生成随机号码。它们遵循一些规则来发行新的卡号。它们首先使用 Luhn 算法验证卡号，并检查它是否以特定号码开头。

在这里，我们将学习验证信用卡号码的不同方法。

使用 React Creditcard Validator NPM 包

react creditcard validator 是一个 NPM 包，允许我们验证卡号。每当用户输入信用卡号码时，它都会检查卡的类型。例如，如果信用卡号码有效，它会显示 Visa、Mastercard 等的图片。如果用户输入的信用卡号码错误，与任何信用卡号码的格式不匹配，则会显示验证消息。

语法

用户可以按照以下语法使用 react creditcard validator NPM 包来验证卡号。

const {
   getCardNumberProps,
   getCardImageProps,
   meta: { erroredInputs },
} = useCreditCardValidator();
<input {...getCardNumberProps()} />
<small>{erroredInputs.cardNumber && erroredInputs.cardNumber}</small>

在上面的语法中，我们从 useCreditCardValidator() 类导入了一些方法，并将它们作为输入属性传递。

示例

在下面的示例中，我们从 NPM 包中导入了 useCreditCardValidator。在 App 组件中，我们使用 getCardNumberProps() 方法以及输入，来验证信用卡号码。

每当用户输入错误的信用卡号码时，它都会显示无效。

import React from "react";
import { useCreditCardValidator, images } from "react-creditcardvalidator";
function App() {
   const {
      getCardNumberProps,
      getCardImageProps,
      meta: { erroredInputs },
   } = useCreditCardValidator();
   return (
      <div>
         <h3>
            {" "}
            Using the <i> React Creditcard Validator NPM package </i> to validate credit card number in ReactJS {" "}
         </h3>
         <div>
            <input {...getCardNumberProps()} /> {" "}
            <svg {...getCardImageProps({ images })} />
            <br />
            <small> {erroredInputs.cardNumber && erroredInputs.cardNumber} </small>
         </div>
      </div>
   );
}
export default App;

输出

使用 Validator NPM 包

用户可以执行以下命令在 React 项目中使用 validator NPM 包。

npm i validator

语法

用户可以按照以下语法使用 isCreditCard() 方法来验证信用卡号码。

let isValid = validator.isCreditCard(value);

在上面的语法中，我们将信用卡号码作为 isCreditCard() 方法的参数传递以进行验证。

示例

在下面的示例中，我们使用了 HTML 输入来获取信用卡号码输入。每当用户更改信用卡输入的值时，它都会调用 handleCreditCard() 函数，该函数使用 validator NPM 包的 isCreditCard() 方法来验证信用卡号码。

import React, { useState } from "react";
import validator from "validator";
function App() {
   let [cardNumber, setCardNumber] = useState("");
   let [message, setMessage] = useState("");
   function handleCreditCard(event) {
      let value = event.target.value;
      setCardNumber(value);
      if (validator.isCreditCard(value)) {
         setMessage("is a valid credit card number");
      } else {
         setMessage("is not a valid credit card number");
      }
   }
   return (
      <div>
         <h3>
            {" "}
            Using the <i> Validator NPM package </i> to validate the credit card number in ReactJS. {" "}
         </h3>
         <input type = "number" value = {cardNumber} onChange = {handleCreditCard} />
         <p>
            {" "}
            {cardNumber} {message}
         </p>
      </div>
   );
}
export default App;

输出

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

使用 Luhn 算法创建自定义信用卡验证算法

这种方法将使用自定义算法从头开始验证信用卡号码。有效的信用卡号码应通过 Luhn 算法，并遵循以下规则。

  • Visa 卡应以 4 开头，长度应为 13 位或 16 位。

  • Mastercard 应以 51 到 55 开头，长度应为 16 位。

  • American Express 卡应以 34 或 37 开头，长度应为 15 位。

语法

用户可以按照以下算法使用 Luhn 算法来验证信用卡号码。

for (let i = cardNumber.length - 1; i >= 0; i--) {
   let digit = parseInt(cardNumber.charAt(i));
   if (shouldDouble)
   if ((digit *= 2) > 9) digit = digit - 9;
   sum += digit;
   shouldDouble = !shouldDouble;
}
let isValid = sum % 10 === 0;

我们通过以下示例解释了上述语法。

步骤

步骤 1 - 定义 sum 和 shouldDouble 变量，并将它们分别初始化为 0 和 false。

步骤 2 - 使用 for 循环迭代卡号的每一位数字（从末尾开始）。

步骤 3 - 使用其 ASCII 码和 parseInt() 方法获取数字值。

步骤 4 - 如果 shouldDouble 的值为 true，则将数字加倍，如果加倍后的值大于 9，则从加倍后的值中减去 9。

步骤 5 - 将最终的数字值添加到 sum 变量。

步骤 6 - 更改 shouldDouble 的值，因为我们需要交替地将数字加倍。

步骤 7 - for 循环迭代完成后，使用模运算符检查 sum 是否能被 10 整除，这意味着信用卡号码通过了 Luhn 测试。

示例

在下面的示例中，我们在 validateByLuhn() 函数中实现了上述算法。在 validateCreditCard() 函数中，我们使用 Luhn 算法验证号码。之后，我们使用三元运算符检查该号码是否符合任何信用卡号码的规则。

例如，如果卡的长度为 15 位，则它应以 34 或 37 开头。如果卡的长度为 16 位，则它应以 4 或 51 到 55 开头。

import React, { useState } from "react";
function App() {
   let [cardNumber, setCardNumber] = useState("");
   let [message, setMessage] = useState("");
   
   // function to validate credit card numbers using the Luhn algorithm
   function validateByLuhn(cardNumber) {
      let sum = 0;
      let shouldDouble = false;
      for (let i = cardNumber.length - 1; i >= 0; i--) {
         let digit = parseInt(cardNumber.charAt(i));
         if (shouldDouble) { 
            if ((digit *= 2) > 9) digit = digit - 9;
         }
         sum = sum + digit;
         shouldDouble = !shouldDouble;
      }
      return sum % 10 === 0;
   }
   function validateCreditCard(event) {
      let cardNumber = event.target.value;
      setCardNumber(cardNumber);
      let isValid =
      (validateByLuhn(cardNumber) &&
      cardNumber.length == 15 &&
      (cardNumber.indexOf("34") == 0 || cardNumber.indexOf("37") == 0)) ||
      (cardNumber.length == 13 && cardNumber[0] == 4) ||
      (cardNumber.length == 16 &&
      (cardNumber[0] == 4 ||
      (cardNumber[0] == 5 && cardNumber[1] >= 1 && cardNumber[1] <= 5)));
      if (isValid) {
         setMessage("Valid Card Number");
      } else {
         setMessage("Invalid Card Number");
      }
   }
   return (
      <div>
         <h3>
            {" "}
            Using the <i> Luhn algorithm </i> to validate credit card number in ReactJS.{" "}
         </h3>
         <input type = "number" value = {cardNumber} onChange = {validateCreditCard} />
         <p> {message} </p>
      </div>
   );
}
export default App;

输出

更新于：2023年3月6日

4K+ 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告