数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在 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;
输出
使用 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;
输出
4K+ 次浏览
