資料結構
網路
關係資料庫管理系統 (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+ 次瀏覽
