信用卡表单验证插件Creditly.js

一个直观的信用卡表单验证插件,复制HTML，CSS和JavaScript在几秒钟内得到一个直观的信用卡表格。验证你的信用卡（使用LUHN算法）是免费的！

用法

你只需要做以下的事情：

包括JavaScript文件（可以在src/creditly.js找到。

现在添加

<script type="text/javascript" src="creditly.js"></script>

包括creditly.css样式表文件（在src / creditly.css可以找到） 。

<link rel="stylesheet" href="creditly.css">

creditly.html文件复制HTML到您的网页（可在src/creditly.html中找到）。

JavaScript初始化。

var creditly = Creditly.initialize(
    '.creditly-wrapper .expiration-month-and-year',
    '.creditly-wrapper .credit-card-number',
    '.creditly-wrapper .security-code',
    '.creditly-wrapper .card-type');

提交表单

当用户希望提交一个表单， Creditly.js可以用来对字段进行验证，并返回结果的输出，如果验证成功。一个例子用法是以下几点：

var creditly = Creditly.initialize(
    '.creditly-wrapper .expiration-month-and-year',
    '.creditly-wrapper .credit-card-number',
    '.creditly-wrapper .security-code',
    '.creditly-wrapper .card-type');
$(".creditly-card-form .submit").click(function(e) {
  e.preventDefault();
  var output = creditly.validate();
  if (output) {
    // Do something with your credit card output.
    console.log(output["number"]);
    console.log(output["security_code"]);
    console.log(output["expiration_month"]);
    console.log(output["expiration_year"]);
  }
});

上面的例子中的第一部分中实例化的creditly变量的creditly对象。然后，每当creditly卡形式。单击提交按钮时，我们通过使用creditly.validate()执行验证。

该creditly.validate方法将返回以下两种情况之一：

如果在任一信用卡号码，安全码，或到期日在验证失败，则返回false 。一个creditly_client_validation_error事件将被触发在HTML的body元素，而有错误的类将被添加到输入的验证失败。

如果所有输入的验证成功，则关联数组的属性将被退回：

数字：在验证信用卡号码

security_code ：信用卡的验证防伪码（也称为CVV ） expiration_month ` ：对于已经生效的到期月份（ 1到12之间的整数）

expiration_year ：经验证期满一年（2000年和2099之间的整数）

在验证错误

每当你调用一个Creditly对象的validate方法后发生错误，事件会在HTML body元素上触发。本次活动，名为creditly_client_validation_error ，将包含一个数据对象的验证失败，也是验证失败的信息输入选择器。该数据具有一个选择器和一个消息属性。人们可以聆听并显示验证消息像这样：

$("body").on("creditly_client_validation_error", function(e, data) {
  alert(data["messages"].join(", "));
});

您可以通过在Creditly对象初始化指定的错误信息更改错误信息。初始化函数可以接受第四个选项参数。可能的选项包括：

security_code_message的消息显示无效的安全码

number_message的消息显示无效的信用卡号码

expiration_message的消息显示无效的到期日期

例如，我们可以用像这样不同的错误信息初始化Creditly对象：

var options = {
  "security_code_message": "Your security code was really wrong!",
  "expiration_message": "Check yo' expiration date yo!"
};
var creditly = Creditly.initialize(
    '.creditly-wrapper .expiration-month-and-year',
    '.creditly-wrapper .credit-card-number',
    '.creditly-wrapper .security-code',
    '.creditly-wrapper .card-type',
    options);

要求

jQuery的> = 1.7

PREVIOUS:
NEXT:
jQuery图片展示插件SuperBox
jQuery灯箱效果插件-Swipebox