其他代码

信用卡制作验证jQuery插件

创客主机


这是一个非常有意思的jQuery制作信用卡插件,你可以自定义卡号等信用卡信息,并用css3制作了翻转效果,可以翻转到背面。这个插件使用纯css制作,没有使用图片。引入js和css文件

  1. <!-- in HEAD -->
  2. <link rel="stylesheet" href="/path/to/card.css">
  3. <!-- at the end of BODY -->
  4. <script src="/path/to/jquery.js"></script>
  5. <script src="/path/to/card.js"></script>

调用插件

  1. $('form').card({
  2.     // a selector or jQuery object for the container
  3.     // where you want the card to appear
  4.     container: '.card-wrapper', // *required*
  5.     numberInput: 'input#number', // optional — default input[name="number"]
  6.     expiryInput: 'input#expiry', // optional — default input[name="expiry"]
  7.     cvcInput: 'input#cvc', // optional — default input[name="cvc"]
  8.     nameInput: 'input#name', // optional - defaults input[name="name"]
  9.  
  10.     width: 200, // optional — default 350px
  11.     formatting: true // optional - default true
  12.  
  13.     // Strings for translation - optional
  14.     messages: {
  15.         validDate: 'valid\ndate', // optional - default 'valid\nthru'
  16.         monthYear: 'mm/yyyy', // optional - default 'month/year'
  17.         fullName: 'Say my name' // optional - default 'Full Name'
  18.     }
  19. });

卡可以使用在有多个输入的形式,呈现单个字段。使用信用卡这个功能,只是通过jQuery选择器中选择字段以正确的顺序,例如:

  1. <form>
  2.     <input type="text" name="number">
  3.     <input type="text" name="first-name"/>
  4.     <input type="text" name="last-name"/>
  5.     <input type="text" name="expiry"/>
  6.     <input type="text" name="cvc"/>
  7. </form>
  8. <script>
  9. $('form').card({
  10.     container: '.card-wrapper',
  11.     nameInput: 'input[name="first-name"], input[name="last-name"]'
  12. });
  13. </script>

在不同语言的字符串,您可以通过在一个消息对象或集合之前初始化卡,信息对象的方法。

  1. <script src="/path/to/card.js"></script>
  2. <form>
  3.     <input type="text" name="number">
  4.     <input type="text" name="name"/>
  5.     <input type="text" name="expiry"/>
  6.     <input type="text" name="cvc"/>
  7. </form>
  8. <script>
  9. $('form').card({
  10.     container: '.card-wrapper',
  11.     messages: {
  12.         validDate: 'expire
  13. date',
  14.         monthYear: 'mm/yy',
  15.         fullName: 'Your name'
  16.     }
  17. });
  18. </script>

$.card.messages 消息的方法

  1. <script src="/path/to/card.js"></script>
  2. <form>
  3.     <input type="text" name="number">
  4.     <input type="text" name="name"/>
  5.     <input type="text" name="expiry"/>
  6.     <input type="text" name="cvc"/>
  7. </form>
  8. <script>
  9. $.card.messages = {
  10.     validDate: 'expire
  11. date',
  12.     monthYear: 'mm/yy',
  13.     fullName: 'Your name'
  14. }
  15. $('form').card();
  16. </script>
(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!