Smart Validate – jQuery плагин для валидации данных кредитных карт

Главная

Статьи

Веб-программирование

12.12.2011 00:00

Smart Validate – jQuery плагин для валидации данных кредитных карт

Smart Validate - это jQuery-плагин для валидации данных кредитных карт, который позволяет сделать эту проверку очень простой задачей. Он гарантирует, что пользователь ввел валидный номер кредитной карты, прежде чем начать транзакцию. Поддерживает все основные кредитные карты (American Express, Mastercard, Visa, Discover, Diners Club).

Использование Smart Validate

В вашем HTML-файле добавьте следующий код между тегами <head>.

Добавьте ссылку на последнюю вверсию jQuery
Добавьте ссылку на файл ccvalidate.js
Добавьте ссылку на файл ccvalidate.css

Затем добавьте код расположенный ниже в свой HTML-документ или используйте классы "cc-ddl-type", "cc-card-number" и "cc-checkout" для существующих элементов. Эти классы являются обязательными, так как плагин использует эти классы, чтобы проверять обязательные значения.

<select class="cc-ddl-type">

<option value="mcd">Master Card</option>

<option value="vis">Visa Card</option>

<option value="amx">American Express</option>

<option value="dnr">Diner Club</option>

<option value="dis">Discover</option>

</select>

<input class="cc-card-number" type="text">

<input class="cc-checkout" value="Checkout" type="submit">

Плагин Smart Validate возвращает булево значение, указывающее является ли номер кредитной карты валидным или нет. См. пример ниже, чтобы увидеть, как он работает.

$('.cc-container').ccvalidate({ onvalidate: function(isValid) {

 if (!isValid) {

 alert('Incorrect Credit Card format');

 return false;

 }

 }

Здесь полный код этого примера:

<!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 Credit Card Validation Plugin Sample</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;

 }

 }

 });

 });

 </script>

</head>

<body>

 <div class="cc-container">

 <select id="cc-types" class="cc-ddl-type">

 <option value="mcd">Master Card</option>

 <option value="vis">Visa Card</option>

 <option value="amx">American Express</option>

 <option value="dnr">Diner Club</option>

 <option value="dis">Discover</option>

 </select>

 <input type="text" id="card-number" class="cc-card-number" />

 <input type="submit" value="Checkout" class="cc-checkout" id="check-out" />

 </div>

</body>

</html>