信用卡申请html模板,HTML5 信用卡表单模板

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

String.prototype.replaceAt = function(index, character) {

return this.substr(0, index) + character + this.substr(index + character.length);

}

String.prototype.insert = function(index, string) {

if (index > 0)

return this.substring(0, index) + string + this.substring(index, this.length);

else

return string + this;

};

var typeValue,

typeText,

cardType,

cardName,

cardNumber,

cardDate,

cardId;

$('#add').on('click', function(e) {

e.preventDefault();

$('.overlay').fadeIn(300);

});

$('.activity').not('.activity.active').hide();

function tabTrigger() {

$('.card').click(function(e) {

e.preventDefault();

$('.card').removeClass('active');

$(this).addClass('active');

$('.activity').hide();

$('.activity[data-id="' + $.attr(this, 'data-id') + '"').fadeIn();

});

}

tabTrigger();

$('.card-form .button').on('click', function(e) {

cardName = $('#cardName').val();

cardNumber = $('#cardNumber').val();

for (var i = 0; i < 12; i++) {

cardNumber = cardNumber.replaceAt(i, "*");

}

cardDate = $('#cardDate').val();

cardCVS = $('#cardCVS').val();

if ($('.type-form').length) {

alert('Please complete card type.');

} else if (cardName == '') {

alert('Card name appears to be empty.');

} else if (cardNumber == '') {

alert('Card number appears to be empty.');

} else if (cardNumber.length != 16) {

alert('Card number appears to be less then 16 characters.');

} else if (cardDate == '') {

alert('Card date appears to be empty.');

} else if (cardCVS == '') {

alert('Card CVS appears to be empty.');

} else {

for (var i = 1; i < 4; i++) {

cardNumber = cardNumber.insert((5 * i) - 1, ' ');

}

cardType = $('.type').text();

cardId = cardNumber.charAt(15);

cardId += cardNumber.charAt(16);

cardId += cardNumber.charAt(17);

cardId += cardNumber.charAt(18);

e.preventDefault();

$('.overlay').fadeOut(300);

$('.cards .content').append('

' + cardNumber + '

Valid Thru: ' + cardDate + '

');

$('.wallet').append($('

Balance

$0.00

It seems you have no recent transactions.

').hide());

tabTrigger();

// Addin Account Balance

$('.form input').val('');

}

});

$('.close').on('click', function(e) {

$('.overlay').fadeOut(300);

});

function typeChange() {

typeText = $('.type').text();

$('.type').on('click', function() {

$(this).replaceWith('')

});

}

typeChange();

$(document).on('keydown', '.type-form', function(e) {

if (e.keyCode == 13) {

e.preventDefault();

typeValue = $('.type-form').val();

$('.type-form').replaceWith('

' + typeValue + '

');

typeChange();

}

});