ReactJs 如何验证一个信用卡号码

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

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

使用React信用卡验证器NPM包

react信用卡验证器是一个NPM包，允许我们验证卡号。每当用户输入信用卡号码时，它就会检查它是哪种类型的卡。例如，如果信用卡号码是有效的，它就会显示visa、master卡等的图像。如果用户输入了一个错误的信用卡号码，并且不符合任何信用卡号码的格式，它就会显示一个验证信息。

语法

用户可以按照下面的语法来使用 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;

输出

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

使用验证器NPM包

用户可以执行下面的命令，在react项目中使用validator NPM包。

npm i validator

语法

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

let isValid = validator.isCreditCard(value);

在上面的语法中，我们把信用卡号码作为isCreditCard()方法的一个参数来验证。

例子

在下面的例子中，我们使用了HTML输入法来输入信用卡号码。每当用户改变信用卡输入的值时，就会调用handleCreditCard()函数，它使用验证器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;

输出

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

使用卢恩的算法创建自定义的信用卡验证算法

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

Visa 卡应该以4开头，长度应该是13或16。
主卡应该以51至55开头，长度应该是16位数。
美国运通卡 应以34或37开头，长度应为15。

语法

用户可以按照下面的算法来使用卢恩算法来验证信用卡号码。

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的值为真，将数字加倍，如果加倍的值大于9，从加倍的值中减去9。

第5步 – 将最后的数字值添加到sum变量中。

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

第7步 - 一旦for循环的迭代完成，使用modulo操作符检查sum是否能被10整除，这意味着信用卡号码通过了Luhn的测试。

例子

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

例如，如果卡的长度是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;