<div class="card-item__wrapper">
<div class="card-item__top">
<img src="https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/chip.png" class="card-item__chip">
<div class="card-item__type">
<transition name="slide-fade-up">
<img v-bind:src="'https://www.mobills.com.br/blog/wp-content/uploads/2021/01/cartao-facil-santander-sx.png/' + getCardType + '.png'" v-if="getCardType" v-bind:key="getCardType" alt="" class="card-item__typeImg">
</transition>
</div>
</div>
<label for="cardNumber" class="card-item__number" ref="cardNumber">
<template v-if="getCardType === 'amex'">
<span v-for="(n, $index) in amexCardMask" :key="$index">
<transition name="slide-fade-up">
<div
class="card-item__numberItem"
v-if="$index > 4 && $index < 14 && cardNumber.length > $index && n.trim() !== ''"
>*</div>
<div class="card-item__numberItem"
:class="{ '-active' : n.trim() === '' }"
:key="$index" v-else-if="cardNumber.length > $index">
{{cardNumber[$index]}}
</div>
<div
class="card-item__numberItem"
:class="{ '-active' : n.trim() === '' }"
v-else
:key="$index + 1"
>{{n}}</div>
</transition>
</span>
</template>
<template v-else>
<span v-for="(n, $index) in otherCardMask" :key="$index">
<transition name="slide-fade-up">
<div
class="card-item__numberItem"
v-if="$index > 4 && $index < 15 && cardNumber.length > $index && n.trim() !== ''"
>*</div>
<div class="card-item__numberItem"
:class="{ '-active' : n.trim() === '' }"
:key="$index" v-else-if="cardNumber.length > $index">
{{cardNumber[$index]}}
</div>
<div
class="card-item__numberItem"
:class="{ '-active' : n.trim() === '' }"
v-else
:key="$index + 1"
>{{n}}</div>
</transition>
</span>
</template>
</label>
<div class="card-item__content">
<label for="cardName" class="card-item__info" ref="cardName">
<div class="card-item__holder">Titular Do Cartão</div>
<transition name="slide-fade-up">
<div class="card-item__name" v-if="cardName.length" key="1">
<transition-group name="slide-fade-right">
<span class="card-item__nameItem" v-for="(n, $index) in cardName.replace(/\s\s+/g, ' ')" v-if="$index === $index" v-bind:key="$index + 1">{{n}}</span>
</transition-group>
</div>
<div class="card-item__name" v-else key="2">Nome Completo</div>
</transition>
</label>
<div class="card-item__date" ref="cardDate">
<label for="cardMonth" class="card-item__dateTitle">Validade</label>
<label for="cardMonth" class="card-item__dateItem">
<transition name="slide-fade-up">
<span v-if="cardMonth" v-bind:key="cardMonth">{{cardMonth}}</span>
<span v-else key="2">MM</span>
</transition>
</label>
/
<label for="cardYear" class="card-item__dateItem">
<transition name="slide-fade-up">
<span v-if="cardYear" v-bind:key="cardYear">{{String(cardYear).slice(2,4)}}</span>
<span v-else key="2">YY</span>
</transition>
</label>
</div>
</div>
</div>
</div>
<div class="card-item__side -back">
<div class="card-item__cover">
<img
v-bind:src="'https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/' + currentCardBackground + '.jpeg'" class="card-item__bg">
</div>
<div class="card-item__band"></div>
<div class="card-item__cvv">
<div class="card-item__cvvTitle">CVV</div>
<div class="card-item__cvvBand">
<span v-for="(n, $index) in cardCvv" :key="$index">
*
</span>
</div>
<div class="card-item__type">
<img v-bind:src="'https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/' + getCardType + '.png'" v-if="getCardType" class="card-item__typeImg">
</div>
</div>
</div>
</div>
</div>
<div class="card-form__inner">
<div class="card-input">
<label for="cardNumber" class="card-input__label"></label>Numero do Cartão
<input type="text" id="cardNumber" class="card-input__input" v-mask="generateCardNumberMask" v-model="cardNumber" v-on:focus="focusInput" v-on:blur="blurInput" data-ref="cardNumber" autocomplete="off">
</div>
<div class="card-input">
<label for="cardName" class="card-input__label">Nome Impresso no Cartão</label>
<input type="text" id="cardName" class="card-input__input" v-model="cardName" v-on:focus="focusInput" v-on:blur="blurInput" data-ref="cardName" autocomplete="off">
</div>
<div class="card-form__row">
<div class="card-form__col">
<div class="card-form__group">
<label for="cardMonth" class="card-input__label">Data de Validade</label>
<select class="card-input__input -select" id="cardMonth" v-model="cardMonth" v-on:focus="focusInput" v-on:blur="blurInput" data-ref="cardDate">
<option value="" disabled selected>Mês</option>
<option v-bind:value="n < 10 ? '0' + n : n" v-for="n in 12" v-bind:disabled="n < minCardMonth" v-bind:key="n">
{{n < 10 ? '0' + n : n}}
</option>
</select>
<select class="card-input__input -select" id="cardYear" v-model="cardYear" v-on:focus="focusInput" v-on:blur="blurInput" data-ref="cardDate">
<option value="" disabled selected>Ano</option>
<option v-bind:value="$index + minCardYear" v-for="(n, $index) in 12" v-bind:key="n">
{{$index + minCardYear}}
</option>
</select>
</div>
</div>
<div class="card-form__col -cvv">
<div class="card-input">
<label for="cardCvv" class="card-input__label">CVV</label>
<input type="text" class="card-input__input" id="cardCvv" v-mask="'####'" maxlength="4" v-model="cardCvv" v-on:focus="flipCard(true)" v-on:blur="flipCard(false)" autocomplete="off">
</div>
</div>
</div>
<button class="card-form__button">
Validar
</button>
</div>
</div>
Nome (como escrito no cartão):
Mês de expiração:
Ano de expiração:
Código de segurança:
American Express | 3400 0000 0000 009 |
Carte Blanche | 3000 0000 0000 04 |
Discover | 6011 0000 0000 0004 |
Diners Club | 3852 0000 0232 37 |
enRoute | 2014 0000 0000 009 |
JCB | 3530 111333300000 |
MasterCard | 5500 0000 0000 0004 |
Solo | 6334 0000 0000 0004 |
Switch | 4903 0100 0000 0009 |
Visa | 4111 1111 1111 1111 |
Laser | 6304 1000 0000 0008 |
Card Number: American Express Carte Blanche Diners Club Discover enRoute JCB Maestro MasterCard Solo Switch Visa Visa Electron Laser Check
{{$index + minCardYear}}
<button class="card-form__button">
Validar
</button>
</div>
</div>
Validação de formulário
Nome:
Email:
Sexo: Masculino Feminino
Profissão Selecione o cargo Programador Designer Tester Todas
Confirmação de Senha <input type="password" placeholder="Senha" id="password" required>
<input type="password" placeholder="Confirme Senha" id="confirm_password" required>
<button type="submit" class="pure-button pure-button-primary">Confirmar</button>
</fieldset>
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link href="https://moip.com.br/docs/stylesheets/screen.css" rel="stylesheet" type="text/css" media="screen" />
<link href="https://moip.com.br/docs/stylesheets/print.css" rel="stylesheet" type="text/css" media="print" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="build/bank-account-validator.min.js"></script>
"; for(i in data.errors){ errors += "- " + data.errors[i].description + "
"; } $("#error_message").removeClass('hide').fadeIn('slow'); $("#error_message").html(errors); $("#success_message").fadeOut(); } }); }); }); </script>
<div class="row">
<h2 class="form-signin-heading" align="center">Bank Account Validator</h2>
<hr>
<div class="col-md-4"> </div>
<div class="col-md-4">
<div id="success_message" class="alert alert-success hide">Conta Bancária válida</div>
<div id="error_message" class="alert alert-danger hide"></div>
<form class="form-signin">
<div class="row">
<div class="col-md-12">
<label>Banco</label>
<select id="bank_number" class="form-control">
<option value="">Selecione o banco</option>
<optgroup label="Principais bancos">
<option value="001">BANCO DO BRASIL S.A.</option>
<option value="237">BANCO BRADESCO S.A.</option>
<option value="341">BANCO ITAÚ S.A.</option>
<option value="104">CAIXA ECONOMICA FEDERAL</option>
<option value="033">BANCO SANTANDER BANESPA S.A.</option>
<option value="399">HSBC BANK BRASIL S.A.</option>
<option value="745">BANCO CITIBANK S.A.</option>
</optgroup>
</select>
</div>
</div>
<br/>
<div class="row">
<div class="col-md-5">
<label>Agência</label>
<input id="agency_number" placeholder="Exemplo: 0170" maxlength="5" type="text" class="form-control" />
</div>
<div class="col-md-4">
<label>Dígito</label>
<input id="agency_check_number" placeholder="Exemplo: 8" maxlength="2" type="text" class="form-control" />
</div>
</div>
<br/>
<div class="row">
<div class="col-md-5">
<label>Conta corrente</label>
<input id="account_number" placeholder="Exemplo: 97845" maxlength="12" type="text" class="form-control" />
</div>
<div class="col-md-4">
<label>Dígito</label>
<input id="account_check_number" placeholder="Exemplo: 1" maxlength="2" type="text" class="form-control" />
</div>
</div>
<br/>
<input type="button" value="Validar conta bancária" id="validate_bank_account" class="btn btn-lg btn-primary btn-block"/>
</form>
</div>
</div>
<div class="col-md-4"></div>
<footer class="footer">
<div class="container">
<div class="text-muted pull-right">Powered by <b><a href="http://www.moip.com.br">Moip</a></b></div>
</div>
</footer>
<div class="col-md-4"></div>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">CheckBoleto</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/" title='Validação de boletos bancários'>CheckBoleto</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#/sobre">Sobre</a></li>
<li><a href="#/validar">Validar Boleto</a></li>
<li><a href="#/virus">Vírus do Boleto</a></li>
<li><a href="#/contato">Contato</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
<html>
Clique aqui
<script> <script src="jquery.js"></script> <script src="jquery.m2brdialog.pack.js"></script>(document).ready(function(){