PageRenderTime 52ms CodeModel.GetById 24ms RepoModel.GetById 1ms app.codeStats 0ms

/gallery/checkcode/1.0/demo.html

https://github.com/akecn/kissy-gallery
HTML | 174 lines | 160 code | 14 blank | 0 comment | 0 complexity | 086b2c956720f18c1c41ff794a1a10d5 MD5 | raw file
    

  1. <!doctype html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <meta charset="utf-8"/>
    5. 

  5. <title>KISSY gallery - checkcode</title>
    6. 

  6. 

  7. <link rel="stylesheet" href="http://a.tbcdn.cn/s/kissy/1.3.0/css/dpl/base-min.css"/>
    8. 

  8. <link rel="stylesheet" href="../../../tools/skin/default.css"/>
    9. 

  9. <script src="http://a.tbcdn.cn/s/kissy/1.3.0/kissy.js" charset="utf-8"></script>
    10. 

  10.     <link rel="stylesheet" href="../../../tools/skin/show-code.js"/>
    11. 

  11. <link type="text/css" href="assets/checkcode.css" rel="stylesheet"  />
    12. 

  12. <link type="text/css" href="assets/message.css" rel="stylesheet"  />
    13. 

  13. <script type="text/javascript" src="assets/Message2.js"></script>
    14. 

  14. <script>
    15. 

  15.     KISSY.config({
    16. 

  16.         packages:[
    17. 

  17.             {
    18. 

  18.                 name:"gallery",
    19. 

  19.                 tag:"20120625",
    20. 

  20.                 path:"../../../",  // cdn上适当修改对应路径
    21. 

  21.                 charset:"utf-8"
    22. 

  22.             }
    23. 

  23.         ]
    24. 

  24.     });
    25. 

  25. </script>
    26. 

  26. </head>
    27. 

  27. <body>
    28. 

  28. <div id="header">
    29. 

  29.     <h1 class="logo"><a alt="KISSY" href="http://kissyui.com/"><img src="http://a.tbcdn.cn/s/kissy/logo.png"/></a></h1>
    30. 

  30.     <div class="sub-title">Gallery</div>
    31. 

  31.     <ul class="navigation">
    32. 

  32.         <li><a href="http://docs.kissyui.com/">首页</a></li>
    33. 

  33.         <li><a href="http://github.com/kissyteam">源码</a></li>
    34. 

  34.     </ul>
    35. 

  35. 

  36. </div>
    37. 

  37. <div id="content">
    38. 

  38.     <div class="s-crumbs">
    39. 

  39.         <span>当前位置：</span>
    40. 

  40.         <a href="http://kissyui.com/">KISSY</a>
    41. 

  41.         <a href="../../../index.html">Gallery</a>
    42. 

  42.         <span>checkcode</span>
    43. 

  43.     </div>
    44. 

  44. 			<pre class="s-section">				
    45. 

  45. 作者：wondger@gmail.com(棪木)
    46. 

  46. 功能：提供图片验证码、语音验证码统一体验。
    47. 

  47. 描述：使用阿里云验证码接口，组件提供异步校验方法接口，需单独调用，组件本身不触发异步校验。
    48. 

  48. 源码：<a href="index.js">checkcode.js</a></pre>
    49. 

  49. 

  50.     <h3 class="s-title">Demo - 验证码</h3>
    51. 

  51.     <div class="s-section">
    52. 

  52.         <div class="s-demo">
    53. 

  53.             <div>DOM内容</div>
    54. 

  54.             <div class="kv-item">
    55. 

  55.                 <span class="kv-label">验证码：</span>
    56. 

  56.                 <input class="i-text" title="验证码" type="text" value="" id="J_CheckCode" />
    57. 

  57.                 <div class="checkcode-ctrl" id="J_CheckCodeContainer"></div>
    58. 

  58.                 <div class="msg-inline msg-weak hide" id="J_CheckCodeTip">
    59. 

  59.                     <i></i>
    60. 

  60.                     <div class="msg-cnt"></div>
    61. 

  61.                 </div>
    62. 

  62.             </div>
    63. 

  63.             
    64. 

  64.             <script>
    65. 

  65.                 var apiserver = window.location.search.indexOf('dev')>0 ? 'http://10.250.5.9:8080' : 'http://pin.aliyun.com'
    66. 

  66.                 KISSY.use('gallery/checkcode/1.0/,Message2',function(S,CheckCode,Message2){
    67. 

  67.                     var tip = Message2('#J_CheckCodeTip'),
    68. 

  68. 

  69.                         checkcode = CheckCode({
    70. 

  70.                             container:'#J_CheckCodeContainer',
    71. 

  71.                             input:'#J_CheckCode',
    72. 

  72.                             prefixCls:'sex-',
    73. 

  73.                             apiserver:apiserver,
    74. 

  74.                             identity:'member1.taobao.com',
    75. 

  75.                             sessionid:'abcde12345'
    76. 

  76.                         }).init();
    77. 

  77. 

  78.                     if(checkcode){
    79. 

  79.                         checkcode.showImg();
    80. 

  80. 

  81.                         checkcode.on('switch',function(){
    82. 

  82.                             tip.hide();
    83. 

  83.                         }).on('refresh',function(){
    84. 

  84.                             tip.hide();
    85. 

  85.                         });
    86. 

  86. 

  87.                         // blur时校验
    88. 

  88.                         S.one('#J_CheckCode').on('blur',function(){
    89. 

  89.                             var val = S.trim(this.value);
    90. 

  90.                             if(!val.length){
    91. 

  91.                                 tip.error('不能为空');
    92. 

  92.                                 return;
    93. 

  93.                             }else if(val.length<4){
    94. 

  94.                                 tip.error('验证码格式错误');
    95. 

  95.                                 return;
    96. 

  96.                             }
    97. 

  97. 

  98.                             checkcode.check(function(data){
    99. 

  99.                                 if(data.success){
    100. 

  100.                                     tip.ok();
    101. 

  101.                                 }else{
    102. 

  102.                                     tip.error('验证码错误');
    103. 

  103.                                 }
    104. 

  104.                             });
    105. 

  105.                         })
    106. 

  106.                     }
    107. 

  107. 

  108.                 });
    109. 

  109.                 
    110. 

  110.             </script>
    111. 

  111.         </div>
    112. 

  112.         <a class="s-view-code" href="demo.html#">显示源码</a><!--点击该链接自动帮你显示s=demo里的内容，如不需要，去除链接即可-->
    113. 

  113.     </div>
    114. 

  114. 

  115.     <h3 class="s-title">API</h3>
    116. 

  116.     <div class="s-section">
    117. 

  117.         <h4 class="s-api-title">构造器</h4>
    118. 

  118.         <div class="s-api-method">
    119. 

  119.             new checkcode(cfg) / checkcode(cfg)
    120. 

  120.         </div>
    121. 

  121.         <h4 class="s-api-title">参数</h4>
    122. 

  122.         <div class="s-api-params">
    123. 

  123.             <ul class="s-list">
    124. 

  124.                 <li>{Object} [cfg] 配置参数</li>
    125. 

  125.             </ul>
    126. 

  126.         </div>
    127. 

  127.         <div class="s-api-params">
    128. 

  128.             cfg: {
    129. 

  129.             <ul class="s-list">
    130. 

  130.                 <li>{HTMLElement|Selector} [ <em>container</em> = '#J_Code' ] 验证码容器</li>
    131. 

  131.                 <li>{HTMLElement|Selector} [ <em>input</em> = "#J_CheckCode" ] 验证码输入框</li>
    132. 

  132.                 <li>{String} [ <em>prefixCls</em> = "reg-" ] CSS Class前缀</li>
    133. 

  133.                 <li>{String} [ <em>identity</em> = "member1.taobao.com" ] 验证码接入应用id，需要阿里云添加后才能正常请求接口</li>
    134. 

  134.                 <li>{String} [ <em>sessionid</em> = "abcdefg123" ] sessionid</li>
    135. 

  135.                 <li>{String} [ <em>apiserver</em> = "http://pin.aliyun.com" ] 接口服务器，默认"http://pin.aliyun.com"</li>
    136. 

  136.             </ul>
    137. 

  137.             }
    138. 

  138.         </div>
    139. 

  139.         
    140. 

  140.         <h4 class="s-api-title">返回</h4>
    141. 

  141.         <div class="s-api-return">null</div>
    142. 

  142.         <h4 class="s-api-title">方法</h4>
    143. 

  143.         <div class="s-api-method">
    144. 

  144.             check(callback)
    145. 

  145.         </div>
    146. 

  146.         <h4 class="s-api-title">参数</h4>
    147. 

  147.         <div class="s-api-params">
    148. 

  148.             <ul class="s-list">
    149. 

  149.                 <li>{Function} [ <em>callback</em> = function(data){} ] 异步校验回调，默认传入data参数{"success":Boolean,"codeType":"IMG/AUDIO"}</li>
    150. 

  150.             </ul>
    151. 

  151.         </div>
    152. 

  152.         <h4 class="s-api-title">返回</h4>
    153. 

  153.         <div class="s-api-return">CheckCode实例对象</div>
    154. 

  154.         <h4 class="s-api-title">事件</h4>
    155. 

  155.         <div class="s-api-method">
    156. 

  156.             switch 图片/语音验证码切换时触发
    157. 

  157.         </div>
    158. 

  158.         <h4 class="s-api-title">事件</h4>
    159. 

  159.         <div class="s-api-method">
    160. 

  160.             refresh 验证码刷新时触发
    161. 

  161.         </div>
    162. 

  162.     </div>
    163. 

  163. 

  164.     <h3 class="s-title">Note</h3>
    165. 

  165.     <div class="s-section">
    166. 

  166.         <ul class="s-list">
    167. 

  167.         </ul>
    168. 

  168.     </div>
    169. 

  169. </div>
    170. 

  170. <div id="footer">
    171. 

  171.     &copy; Copyright 2010~2100, KISSY Team.
    172. 

  172. </div>
    173. 

  173. </body>
    174. 

  174. </html>
    175. 

  175.