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

信用卡表单验证插件Creditly.js
 点击预览  点击下载

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

用法

你只需要做以下的事情:

包括javascript文件(可以在src/creditly.js找到。

现在添加

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

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

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

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

javascript初始化。

  1. var creditly = Creditly.initialize( 
  2.     '.creditly-wrapper .expiration-month-and-year' 
  3.     '.creditly-wrapper .credit-card-number' 
  4.     '.creditly-wrapper .security-code' 
  5.     '.creditly-wrapper .card-type'); 

提交表单

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

  1. var creditly = Creditly.initialize( 
  2.     '.creditly-wrapper .expiration-month-and-year' 
  3.     '.creditly-wrapper .credit-card-number' 
  4.     '.creditly-wrapper .security-code' 
  5.     '.creditly-wrapper .card-type'); 
  6. $(".creditly-card-form .submit").click(function(e) { 
  7.   e.preventDefault(); 
  8.   var output = creditly.validate(); 
  9.   if (output) { 
  10.     // Do something with your credit card output. 
  11.     console.log(output["number"]); 
  12.     console.log(output["security_code"]); 
  13.     console.log(output["expiration_month"]); 
  14.     console.log(output["expiration_year"]); 
  15.   } 
  16. }); 

上面的例子中的第一部分中实例化的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 ,将包含一个数据对象的验证失败,也是验证失败的信息输入选择器。该数据具有一个选择器和一个消息属性。人们可以聆听并显示验证消息像这样:

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

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

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

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

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

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

  1. var options = { 
  2.   "security_code_message""Your security code was really wrong!" 
  3.   "expiration_message""Check yo' expiration date yo!" 
  4. }; 
  5. var creditly = Creditly.initialize( 
  6.     '.creditly-wrapper .expiration-month-and-year' 
  7.     '.creditly-wrapper .credit-card-number' 
  8.     '.creditly-wrapper .security-code' 
  9.     '.creditly-wrapper .card-type' 
  10.     options); 

要求

jQuery的> = 1.7

转载请注明:代码家园 » 信用卡表单验证插件Creditly.js

也许你会喜欢和关注与本文内容高度相关的文章:

带多个选项卡表单提交的滑动门

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)