分享

基于JavaScript实现暗码框验证信息

云技术五哥 发表于 2015-11-5 20:47:56 [显示全部楼层] 回帖奖励 阅读模式 关闭右栏 0 4096
本文真例为各人分享了JavaScript完成暗码框考证疑息的详细代码,供各人参考,详细内乱容以下
web前端-云社区基于JavaScript实现暗码框验证信息byun.com(1)
                               
登录/注册后可看年夜图

web前端-云社区基于JavaScript实现暗码框验证信息byun.com(2)
                               
登录/注册后可看年夜图

  1. <!DOCTYPE html>
  2. <html lang="en">

  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         div {
  9.             width: 600px;
  10.             margin: 100px auto;
  11.         }
  12.         
  13.         .message {
  14.             display: inline-block;
  15.             font-size: 12px;
  16.             color: #999;
  17.             background: url(./img/1.png) no-repeat left center;
  18.             padding-left: 10px;
  19.         }
  20.         
  21.         .wrong {
  22.             color: red;
  23.             background-image: url(img/2.png);
  24.         }
  25.         
  26.         .right {
  27.             color: green;
  28.             background-image: url(img/3.png);
  29.         }
  30.     </style>
  31. </head>

  32. <body>
  33.     <div class="register">
  34.         <input type="password" class="ipt">
  35.         <p class="message">请输进6-16位暗码</p>
  36.     </div>
  37.     <script>
  38.         //获得元素
  39.         var ipt = document.querySelector('.ipt');
  40.         var message = document.querySelector('.message');
  41.         //注册变乱
  42.         ipt.onblur = function() {
  43.             //按照表单的值的少度
  44.             if (this.value.length < 6 || this.value.length > 16) {
  45.                 message.className = 'message wrong';
  46.                 message.innerHTML = '您输进的位数不合错误';
  47.             } else {
  48.                 message.className = 'message right';
  49.                 message.innerHTML = '输进准确';
  50.             }
  51.         }
  52.     </script>
  53. </body>

  54. </html>
复造代码
运转成果
web前端-云社区基于JavaScript实现暗码框验证信息byun.com(3)
                               
登录/注册后可看年夜图

以上便是本文的局部内乱容,祈望对各人的进修有所协助,也祈望各人多多撑持剧本之家。
                                                         
       以上所述是云社区专客手艺小编经心给各人收拾整顿的本常识相干引见;期望对亲们进修事情提拔有所协助。                                     若有任何疑问、相干分享交换等,可正在本文章底部留行或批评; 欢送IT手艺妙手亦或菜鸟们各持己见、万马齐喑,让云社区成为IT手艺更好的交换进修仄台;   正在此更万分感激各人对云社区专客网站的撑持!                                                                                                                                                                                                                                                                                            
滥觞:云社区转戴;            免责声明:假如进犯了您的权益,请联络站少,我们会实时删除侵权内乱容,感谢协作!
回复

使用道具 举报

没找到任何评论,期待你打破沉寂

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

香港云服务器免费试用