W3CAPI 在线教程 | 菜鸟教程_LOGO
文档目录
文档目录
我的书签
请登录
 

JavaScript

JavaScript 入门教程

JavaScript是一门Web编程语言，用来实现网页的交互功能，它和HTML、CSS共同组成了个Web开发的基础工具集合，也是前端开发者必备的技能；学习JavaScript教程可以了解它在网页开发中的所有特性和相关概念，让我们能够更加快速的去开发Web应用。

W3CAPI
1
2025-07-24 06:32:11

信用卡号验证

JavaScript：HTML表单 - 信用卡号码验证

信用卡号验证

在通过HTML表单接收付款时，验证信用卡是一个关键环节。本文重点讨论如何运用JavaScript验证不同格式的信用卡号码。当前金融市场中，多家企业提供信用卡服务，但其编号系统缺乏统一标准，不同发卡机构的格式存在差异。需特别说明，本文列出的格式可能无法完全确保准确性，原因在于发卡机构可能随时调整其编号规则。针对不同信用卡的验证，只需修改对应的正则表达式即可实现格式适配。以下是部分知名信用卡的典型格式示例：

  • 美国运通卡：卡号以34或37开头，长度为15位。
  • Visa卡：以4开头，卡号长度为13或16位数字。
  • 万事达卡：起始数字51至55，卡号长度16位。
  • Discover：卡号以6011开头且长度为16位，或卡号以5开头且长度为15位。
  • 大莱卡：卡号以300-305、36或38开头；长度为14位。
  • JCB卡：卡号以2131或1800开头时为15位，或以35开头时为16位。

以下代码块包含上述信用卡验证的实际实现代码。所有验证规则的CSS代码部分均保持通用。

CSS代码

li {list-style-type: none;
font-size: 16pt;
}
.mail {
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
width: 400px;
background : #D8F1F8;
border: 1px soild silver;
}
.mail h2 {
margin-left: 38px;
}
input {
font-size: 20pt;
}
input:focus, textarea:focus{
background-color: lightyellow;
}
input submit {
font-size: 12pt;
}
.rq {
color: #FF0000;
font-size: 10pt;
}
执行一下

验证美国运通信用卡

以下示例验证美国运通信用卡：以34或37开头，长度为15位数字。

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - checking non-empty</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />      
</head><body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input Credit Card No.[Starting with 34 or 37, length 15 digits (American Express) and Submit</h2>
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1'/></li>
<li>&nbsp;</li>
<li class="submit"><input type="submit" name="submit" value="Submit" onclick="cardnumber(document.form1.text1)"/></li>
<li>&nbsp;</li>
</ul>
</form>
</div>
<script src="credit-card-americal-express-validation.js"></script>
</body>
</html>
执行一下

JavaScript代码

function cardnumber(inputtxt)
{
  var cardno = /^(?:3[47][0-9]{13})$/;
  if(inputtxt.value.match(cardno))
        {
      return true;
        }
      else
        {
        alert("Not a valid Amercican Express credit card number!");
        return false;
        }
}
执行一下

在浏览器中查看示例

Flowchart:


验证Visa信用卡

以下示例验证以4开头、长度13或16位数字的Visa信用卡。

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - checking non-empty</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />      
</head><body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input Credit Card No.[Starting with 4 length 13 or 16 digits (Visa) and Submit</h2>
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1'/></li>
<li>&nbsp;</li>
<li class="submit"><input type="submit" name="submit" value="Submit" onclick="cardnumber(document.form1.text1)"/></li>
<li>&nbsp;</li>
</ul>
</form>
</div>
<script src="credit-card-visa-validation.js"></script>
</body>
</html>
执行一下

JavaScript代码

function cardnumber(inputtxt)
{
  var cardno = /^(?:4[0-9]{12}(?:[0-9]{3})?)$/;
  if(inputtxt.value.match(cardno))
        {
      return true;
        }
      else
        {
        alert("Not a valid Visa credit card number!");
        return false;
        }
}
执行一下

在浏览器中查看示例

Flowchart:


验证MasterCard

以下示例验证万事达卡：起始数字为51至55，长度为16位数字。

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - checking non-empty</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />      
</head><body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input Credit Card No.[Starting with 51 through 55, length 16 digits (Mastercard) and Submit</h2>
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1'/></li>
<li>&nbsp;</li>
<li class="submit"><input type="submit" name="submit" value="Submit" onclick="cardnumber(document.form1.text1)"/></li>
<li>&nbsp;</li>
</ul>
</form>
</div>
<script src="credit-card-master-validation.js"></script>
</body>
</html>
执行一下

JavaScript代码

function cardnumber(inputtxt)
{
  var cardno = /^(?:5[1-5][0-9]{14})$/;
  if(inputtxt.value.match(cardno))
        {
      return true;
        }
      else
        {
        alert("Not a valid Mastercard number!");
        return false;
        }
}
执行一下

在浏览器中查看示例

Flowchart:


验证Discover卡

以下示例验证以6011开头、长度为16位的Discover卡，或以5开头、长度为15位的Discover卡。

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - checking non-empty</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />      
</head><body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input Credit Card No.[Starting with 6011, length 16 digits or starting with 5, length 15 digits (Discover) and Submit</h2>
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1'/></li>
<li>&nbsp;</li>
<li class="submit"><input type="submit" name="submit" value="Submit" onclick="cardnumber(document.form1.text1)"/></li>
<li>&nbsp;</li>
</ul>
</form>
</div>
<script src="credit-card-master-validation.js"></script>
</body>
</html>
执行一下

JavaScript代码

function cardnumber(inputtxt)
{
  var cardno = /^(?:6(?:011|5[0-9][0-9])[0-9]{12})$/;
  if(inputtxt.value.match(cardno))
        {
      return true;
        }
      else
        {
        alert("Not a valid Discover card number!");
        return false;
        }
}
执行一下

在浏览器中查看示例

Flowchart:


验证大莱俱乐部信用卡

以下示例验证大来俱乐部卡号，起始数字为300至305、36或38，总长度为14位。

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - checking non-empty</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />      
</head><body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input Credit Card No.[starting with 300 through 305, 36, or 38, length 14 digits (Diners Club) and Submit</h2>
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1'/></li>
<li>&nbsp;</li>
<li class="submit"><input type="submit" name="submit" value="Submit" onclick="cardnumber(document.form1.text1)"/></li>
<li>&nbsp;</li>
</ul>
</form>
</div>
<script src="credit-card-diners-validation.js"></script>
</body>
</html>
执行一下

JavaScript代码

function cardnumber(inputtxt)
{
  var cardno = /^(?:3(?:0[0-5]|[68][0-9])[0-9]{11})$/;
  if(inputtxt.value.match(cardno))
        {
      return true;
        }
      else
        {
        alert("Not a valid Dinners Club card number!");
        return false;
        }
}
执行一下

在浏览器中查看示例

Flowchart:


验证JCB卡

以下示例验证JCB信用卡：以2131或1800开头时长度为15位，以35开头时长度为16位。

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - checking non-empty</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />      
</head><body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input Credit Card No.[Starting with 2131 or 1800, length 15 digits or starting with 35, length 16 digits (JCB card) and Submit</h2>
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1'/></li>
<li>&nbsp;</li>
<li class="submit"><input type="submit" name="submit" value="Submit" onclick="cardnumber(document.form1.text1)"/></li>
<li>&nbsp;</li>
</ul>
</form>
</div>
<script src="credit-card-jcb-validation.js"></script>
</body>
</html>
执行一下

JavaScript代码

function cardnumber(inputtxt)
{
  var cardno = /^(?:(?:2131|1800|35\d{3})\d{11})$/;
  if(inputtxt.value.match(cardno))
        {
      return true;
        }
      else
        {
        alert("Not a valid JCB card number!");
        return false;
        }
}
执行一下

在浏览器中查看示例

Flowchart:


file_download从此处下载验证码。

其他JavaScript验证：

上一篇：JavaScript：HTML表单 - 电话号码验证
下一篇：JavaScript：HTML表单验证——密码检查

作者文档
相关提问
敬请期待

扫一扫关注官方微信公众号
豫ICP备18043494号-2
以API的视角诠释计算机技术
W3CAPI 在线教程 | 菜鸟教程 © 2018 版权所有