<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery信用卡验证插件 - 网页模板</title>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="ccvalidate.js" type="text/javascript"></script>
<link href="ccvalidate.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$('.cc-container').ccvalidate({ onvalidate: function(isValid) {
if (!isValid) {
alert('Incorrect Credit Card format');
return false;
}
}
});
$('.cc-ddl-contents').css('display', 'none');
$('.cc-ddl-header').toggle(function() {
toggleContents($(this).parent().find('.cc-ddl-contents'));
}, function() { toggleContents($(this).parent().find('.cc-ddl-contents')); });
function toggleContents(el) {
$('.cc-ddl-contents').css('display', 'none');
if (el.css('display') == 'none') el.fadeIn("slow");
else el.fadeOut("slow");
}
$('.cc-ddl-contents a').click(function() {
$(this).parent().parent().find('.cc-ddl-o select').attr('selectedIndex', $('.cc-ddl-contents a').index(this));
$(this).parent().parent().find('.cc-ddl-title').html($(this).html());
$(this).parent().parent().find('.cc-ddl-contents').fadeOut("slow");
});
$(document).click(function() {
$('.cc-ddl-contents').fadeOut("slow");
});
$('#check').click(function() {
var cnumber = $('#cnumber').val();
var type = $('#ctype').val();
alert(isValidCreditCard(cnumber, type) ? 'Valid' : 'Invalid');
});
});
</script>
<style type="text/css">
/* body
{
background: url(bg.png);
}
#wrapper
{
width: 700px;
height: 300px;
margin: auto;
padding-top: 50px;
}*/body
{
background: url(bg.png);
margin: 0;
padding: 0;
font-family: Arial, Sans-Serif;
font-size: 10pt;
}
#wrapper
{
width: 1024px;
height: 834px;
margin: auto;
border: solid 1px black;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
#wrapper #header
{
/*width: 99%;*/
height: 110px;
color: White;
font-size: 24px;
font-weight: bold;
padding-left: 20px;
padding-top: 40px;
-moz-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;
border-top-left-radius: 8px;
-moz-border-radius-topright: 8px;
-webkit-border-top-right-radius: 8px;
border-top-right-radius: 8px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#747577), to(#363739));
background-image: -moz-linear-gradient(#747577, #363739);
background-image: -webkit-linear-gradient(#747577, #363739);
background-image: -o-linear-gradient(#747577, #363739);
filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#747577, endColorstr=#363739)";
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#747577, endColorstr=#363739)";
}
#wrapper #menu-bar
{
width: 100%;
height: 29px;
padding-top: 4px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E5E5E5), to(#CFCFCF));
background-image: -moz-linear-gradient(#E5E5E5, #CFCFCF);
background-image: -webkit-linear-gradient(#E5E5E5, #CFCFCF);
background-image: -o-linear-gradient(#E5E5E5, #CFCFCF);
filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5E5E5, endColorstr=#CFCFCF)";
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5E5E5, endColorstr=#CFCFCF)";
border-bottom: solid 1px #747577;
}
#wrapper #contents
{
width: 100%;
height: 540px;
padding-top: 60px;
}
#wrapper #footer
{
width: 100%;
height: 50px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#747577), to(#363739));
background-image: -moz-linear-gradient(#747577, #363739);
background-image: -webkit-linear-gradient(#747577, #363739);
background-image: -o-linear-gradient(#747577, #363739);
filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#747577, endColorstr=#363739)";
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#747577, endColorstr=#363739)";
-moz-border-radius-bottomleft: 8px;
-webkit-border-bottom-left-radius: 8px;
border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-webkit-border-bottom-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top: solid 1px #747577;
}
#menu-bar ul
{
list-style: none;
margin: 0;
padding: 0;
margin-left: 4px;
}
#menu-bar ul li
{
float: left;
display: inline-block;
padding: 4px;
}
#menu-bar ul li a, #menu-bar ul li a:active, #menu-bar ul li a:visited
{
text-decoration: none;
color: #747577;
}
#menu-bar ul li a:hover
{
text-decoration: underline;
color: #747577;
}
#footer div
{
padding-top: 14px;
width: 180px;
margin: auto;
color: White;
}
#footer div a, #footer div a:active, #footer div a:visited
{
text-decoration: none;
color: white;
}
#footer div a:hover
{
text-decoration: underline;
color: white;
}
.cc-container
{
margin: auto;
}
</style>
</head>
<body>
<form method="POST,GET" id="form" action="checkout.htm">
<br><br>
<div id="contents">
<div class="cc-container">
<div class="cc-header">
Please enter your billing information</div>
<div class="cc-contents">
<table cellpadding="4" cellspacing="0">
<tr>
<td style="width: 97px">
<label>
Card Type</label>
</td>
<td style="width: 270px">
<div class="cc-ddl">
<div class="cc-ddl-o">
<select id="cc-types" class="cc-ddl-type">
<option value="mcd">Master Card</option>
<option value="vis">Visa Card</option>
<option value="amx">Amer
