albert/cc-validator
1
0
Fork 0
mirror of https://github.com/skidoodle/cc-validator.git synced 2025-02-15 05:39:14 +01:00
Code Issues Projects Releases Packages Wiki Activity

first commit

Browse source
This commit is contained in:
skidoodle 2023-10-30 18:07:54 +01:00
commit 6c3255f2bb
3 changed files with 112 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

18
index.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>CC Validator</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="style.css" />
<script async src="script.js"></script>
</head>
<body>
<h1>CC Validator</h1>
<form>
<input type="text" id="cc" oninput="restrictInput(this, 'number')" />
<button type="submit" onclick="checkCC()">Validate</button>
</form>
<p id="result"></p>
</body>
</html>

47
script.js Normal file
View file

@ -0,0 +1,47 @@
function restrictInput(a) {
a.value = a.value.replace(/[^0-9]/g, "").slice(0, 16);
}
function validateCreditCard(a) {
a = a.replace(/\D/g, "");
var b = getCardNetwork(a);
return b && a.length == b.length && luhnCheck(a) ? !0 : !1;
}
function getCardNetwork(a) {
const cardNetworks = [
{ pattern: /^\b4\d{15}\b/, name: "Visa", length: 16 },
{ pattern: /^\b5[1-5]\d{14}\b/, name: "MasterCard", length: 16 },
{ pattern: /^\b3[47]\d{13}\b/, name: "American Express", length: 15 },
{ pattern: /^\b30[0-5]\d{11}\b/, name: "Diners Club", length: 14 },
{ pattern: /^\b35[3-8]\d{13}\b/, name: "JCB", length: 16 },
{ pattern: /^\b5[0678]\d{14,17}\b/, name: "Maestro", length: 16 },
{ pattern: /^\b6011\d{12}\b/, name: "Discover", length: 16 }
];
for (const network of cardNetworks) {
if (network.pattern.test(a)) {
return { name: network.name, length: network.length };
}
}
return null;
}
function luhnCheck(a) {
for (var b = 0, c = !1, e = a.length - 1; 0 <= e; e--) {
var d = parseInt(a.charAt(e));
c && (d *= 2, 9 < d && (d -= 9));
b += d;
c = !c;
}
return 0 === b % 10;
}
function checkCC() {
event.preventDefault();
var a = document.querySelector("#cc"), b = document.querySelector("#result"), c = getCardNetwork(a.value);
a = validateCreditCard(a.value);
b.textContent = a ? "Credit card is valid. (" + c.name + ")" : "Credit card is invalid.";
b.style.color = a ? "#4CAF50" : "#FF5733";
return a;
};

47
style.css Normal file
View file

@ -0,0 +1,47 @@
body,
input {
width: 100%;
text-align: center;
}
body {
font-family: Arial, sans-serif;
background-color: #121212;
color: #338ef7;
font-size: 1.5rem;
margin: 10% auto;
}
form {
max-width: 350px;
margin: 0 auto;
}
input,
label {
margin: 10px 0;
color: #338ef7;
font-size: 2rem;
}
input {
padding: 10px;
border: 1px solid #338ef7;
border-radius: 5px;
background-color: #333;
box-sizing: border-box;
}
button {
background-color: #338ef7;
color: #efefef;
border: none;
margin-top: 15px;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
font-weight: 700;
}
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type='number'] {
-moz-appearance: textfield;
}