一个直观的信用卡表单验证插件,复制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 2 3 4 5 | 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可以用来对字段进行验证，并返回结果的输出，如果验证成功。一个例子用法是以下几点：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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 ，将包含一个数据对象的验证失败，也是验证失败的信息输入选择器。该数据具有一个选择器和一个消息属性。人们可以聆听并显示验证消息像这样：
1 2 3 | $("body").on("creditly_client_validation_error", function(e, data) { alert(data["messages"].join(", "));}); |
您可以通过在Creditly对象初始化指定的错误信息更改错误信息。初始化函数可以接受第四个选项参数。可能的选项包括：
security_code_message的消息显示无效的安全码
number_message的消息显示无效的信用卡号码
expiration_message的消息显示无效的到期日期
例如，我们可以用像这样不同的错误信息初始化Creditly对象：
1 2 3 4 5 6 7 8 9 10 | 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
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jQuery灯箱效果插件-Swipebox
- 下一个特效： jQuery图片展示插件SuperBox