其他代码

带强度检测的密码输入框jQuery特效

也想出现在这里?联系我们
面包多

带强度检测的密码输入框jQuery特效-创客云
这是一款 jQuery 带强度检测的密码输入框设计效果。该密码输入框在输入密码时,可以实时提示密码的强度,以及显示密码等。
使用方法
在 HTML 文件中引入

  1. <script src="//code.jquery.com/jquery.min.js"></script>
也想出现在这里?联系我们
创客主机

HTML 结构

也想出现在这里?联系我们
创客主机

  1. <div class="setPw">
  2.   <div class="pwGuide">
  3.     <div class="pwList">
  4.       <ul>
  5.         <li><span id="pwChar">7 Characters</span></li>
  6.         <li><span id="pwLower">1 lowercase</span></li>
  7.         <li><span id="pwCap">1 UPPERCASE</span></li>
  8.         <li><span id="pwNum">1 Number</span></li>
  9.       </ul>
  10.     </div>
  11.     <svg class="pwCheck" width="32" height="33" viewbox="0 0 32 33">
  12.       <circle cx="16.1886" cy="16.6948" r="15.7492" fill="#70D5B9"></circle>
  13.       <path d="M10.5639 16.4698L14.3887 20.7446L22.7133 12.645" stroke="white" stroke-width="2.69986"></path>
  14.     </svg>
  15.     <svg width="225" height="160" viewbox="0 0 225 160" fill="none" xmlns="http://www.w3.org/2000/svg">
  16.       <path d="M74.3499 1.61518C116.925 -6.45707 134.575 17.6849 138.078 30.765C143.295 42.3501 136.065 80.2503 137.631 113.057C139.867 159.921 117.282 159.024 107.444 159.921C97.605 160.818 41.4799 154.091 22.6969 139.292C7.67061 127.453 -8.81015 78.4076 5.47931 45.3399C14.1999 25.1592 31.7753 9.68743 74.3499 1.61518Z" fill="#3A296A"></path>
  17.       <path d="M21.6109 83.1567L20.9714 79.1187C20.2749 74.7216 23.275 70.5924 27.6722 69.8959V69.8959C32.0119 69.2086 36.1027 72.1232 36.8703 76.4495L37.6107 80.6226" stroke="#A59FC9" stroke-width="5.39972"></path>
  18.       <rect x="14.4999" y="84.283" width="30.5984" height="28.3486" rx="3.59982" transform="rotate(-9 14.4999 84.283)" fill="#BE337A"></rect>
  19.       <rect x="14.4999" y="84.283" width="30.5984" height="20.249" rx="3.59982" transform="rotate(-9 14.4999 84.283)" fill="#E3488B"></rect>
  20.       <path fill-rule="evenodd" clip-rule="evenodd" d="M34.3401 100.243C35.3055 99.4602 35.8385 98.1979 35.63 96.8819C35.319 94.9182 33.475 93.5785 31.5114 93.8895C29.5478 94.2005 28.208 96.0445 28.519 98.0081C28.7275 99.3242 29.6245 100.36 30.7846 100.806L31.2823 103.949C31.4378 104.93 32.3598 105.6 33.3416 105.445C34.3234 105.289 34.9933 104.367 34.8378 103.386L34.3401 100.243Z" fill="#3A296A"></path>
  21.       <path fill-rule="evenodd" clip-rule="evenodd" d="M45.4836 25.9488C42.0049 25.8881 39.1357 28.6589 39.075 32.1376L37.4494 125.269C37.3886 128.747 40.1594 131.617 43.6381 131.677L48.6056 131.764C48.596 131.615 48.5923 131.465 48.595 131.314C48.647 128.332 51.1064 125.957 54.0881 126.009C57.0698 126.061 59.4448 128.521 59.3928 131.502C59.3901 131.654 59.3813 131.804 59.3664 131.952L216.403 134.693C219.882 134.754 222.751 131.983 222.812 128.504L224.437 35.3731C224.498 31.8944 221.727 29.0252 218.248 28.9645L45.4836 25.9488ZM54.9048 79.2187C57.8866 79.2707 60.3459 76.8957 60.398 73.914C60.45 70.9323 58.0751 68.4729 55.0933 68.4209C52.1116 68.3688 49.6522 70.7438 49.6002 73.7255C49.5481 76.7073 51.9231 79.1666 54.9048 79.2187ZM59.8954 102.708C59.8433 105.69 57.384 108.065 54.4022 108.013C51.4205 107.961 49.0455 105.501 49.0976 102.52C49.1496 99.538 51.609 97.163 54.5907 97.215C57.5724 97.2671 59.9474 99.7264 59.8954 102.708Z" fill="#F6BD41"></path>
  22.     </svg>
  23.   </div>
  24.   <div class="inp-password">
  25.     <form id="pwSignup" method="post" action="#">
  26.       <input class="inp" id="password" type="password" placeholder="Passwort"/>
  27.       <div class="hide" id="showPW"></div>
  28.     </form>
  29.   </div>
  30. </div>

CSS 样式

  1. body {
  2.   background: #553e8f;
  3.   min-height: 100vh;
  4.   display: flex;
  5.   justify-content: center;
  6.   align-items: center;
  7.   font-family: sans-serif;
  8. }
  9. * {
  10.   box-sizing: border-box;
  11. }
  12. .setPw{
  13.   padding: 50px 0;
  14. }
  15. .pwGuide {
  16.   position: relative;
  17.   width: 250px;
  18.   height: 160px;
  19.   margin: 0 auto;
  20. }
  21. .pwGuide .pwList {
  22.   position: absolute;
  23.   top: 25px;
  24.   left: 52px;
  25.   width: 194px;
  26.   height: 104px;
  27.   border-radius: 6px;
  28.   background: #fff;
  29.   box-shadow: inset 3px 0 0 #cfdae1;
  30.   transform: rotate(-5deg) translate3d(0, 0, 0);
  31.   font-family: 'Special Elite', cursive;
  32.   font-size: 12px;
  33. }
  34. .pwGuide .pwList:before {
  35.   content: '';
  36.   width: 2px;
  37.   height: 100%;
  38.   background: #e45998;
  39.   position: absolute;
  40.   left: 22px;
  41. }
  42. .pwGuide .pwList ul {
  43.   padding: 13px 0 0 0;
  44. }
  45. .pwGuide .pwList ul li {
  46.   padding-bottom: 3px;
  47.   margin-bottom: 6px;
  48.   padding-left: 34px;
  49.   border-bottom: 1px solid #d8cbf5;
  50. }
  51. .pwGuide .pwList ul li span {
  52.   position: relative;
  53.   color: #423666;
  54. }
  55. .pwGuide .pwList ul li span:after {
  56.   content: '';
  57.   width: 100%;
  58.   height: 3px;
  59.   background: #70d5b9;
  60.   position: absolute;
  61.   left: 0;
  62.   top: 3px;
  63.   transform-origin: left;
  64.   transform: scaleX(0);
  65.   transition: transform 0.4s ease;
  66. }
  67. .pwGuide .pwList ul li span.valid:after {
  68.   transform: scaleX(1);
  69. }
  70. .pwGuide .pwCheck {
  71.   position: absolute;
  72.   fill: none;
  73.   top: 84px;
  74.   right: 10px;
  75. }
  76. .pwCheck {
  77.   transform: scale(0);
  78.   transition: transform 0.3s cubic-bezier(0.86, 0.45, 0.72, 1.2);
  79. }
  80. .pwCheck.pwValid {
  81.   transform: scale(1);
  82. }
  83. .inp-password {
  84.   position: relative;
  85.   margin: 60px 0 0 0;
  86. }
  87. .inp-password input {
  88.   background: #3a296a;
  89.   width: 100%;
  90.   border: 0;
  91.   border-radius: 6px;
  92.   font-size: 16px;
  93.   padding: 12px 16px;
  94.   margin: 0;
  95.   color: #fff;
  96. }
  97. .inp-password input:focus {
  98.   outline: none;
  99. }
  100. .inp-password #showPW {
  101.   position: absolute;
  102.   right: 15px;
  103.   top: 14px;
  104.   line-height: 14px;
  105.   cursor: pointer;
  106.   color: #f6bd41;
  107.   font-size: 12px;
  108.   font-weight: bold;
  109. }
  110. .inp-password #showPW:after {
  111.   content: 'HIDE';
  112. }
  113. .inp-password #showPW.hide:after {
  114.   content: 'SHOW';
  115. }
  116. .dribbble {
  117.   position: fixed;
  118.   right: 20px;
  119.   bottom: 16px;
  120.   color: #251a46;
  121.   font-family: 'Special Elite', cursive;
  122.   font-size: 17px;
  123.   text-decoration: none;
  124. }
  125. ::-webkit-input-placeholder {
  126.   color: #ad9ed3;
  127. }

javascript
然后通过下面的代码来初始化插件

  1. var password = document.querySelector('#password');
  2.  
  3. var helperText = {
  4.   charLength: document.querySelector('#pwChar'),
  5.   lowercase: document.querySelector('#pwLower'),
  6.   uppercase: document.querySelector('#pwCap'),
  7.   number: document.querySelector('#pwNum')
  8. };
  9.  
  10. var pattern = {
  11.   charLength: function () {
  12.     if (password.value.length >= 7) {
  13.       return true;
  14.     }
  15.   },
  16.   lowercase: function () {
  17.     var regex = /^(?=.*[a-z]).+$/;
  18.  
  19.     if (regex.test(password.value)) {
  20.       return true;
  21.     }
  22.   },
  23.   uppercase: function () {
  24.     var regex = /^(?=.*[A-Z]).+$/;
  25.  
  26.     if (regex.test(password.value)) {
  27.       return true;
  28.     }
  29.   },
  30.   number: function () {
  31.     var regex = /^(?=.*[0-9]).+$/;
  32.  
  33.     if (regex.test(password.value)) {
  34.       return true;
  35.     }
  36.   }
  37. };
  38.  
  39. // Listen for keyup action on password field
  40. password.addEventListener('keyup', function () {
  41.   // Check that password is a minimum of 8 characters
  42.   patternTest(pattern.charLength(), helperText.charLength);
  43.  
  44.   // Check that password contains a lowercase letter      
  45.   patternTest(pattern.lowercase(), helperText.lowercase);
  46.  
  47.   // Check that password contains an uppercase letter
  48.   patternTest(pattern.uppercase(), helperText.uppercase);
  49.  
  50.   // Check that password contains a number or special character
  51.   patternTest(pattern.number(), helperText.number);
  52.  
  53.   // Check that all requirements are fulfilled
  54.   if (hasClass(helperText.charLength, 'valid') &&
  55.     hasClass(helperText.lowercase, 'valid') &&
  56.     hasClass(helperText.uppercase, 'valid') &&
  57.     hasClass(helperText.number, 'valid')
  58.   ) {
  59.     addClass(password.parentElement, 'valid');
  60.     $('.pwCheck').addClass('pwValid');
  61.   } else {
  62.     removeClass(password.parentElement, 'valid');
  63.     $('.pwCheck').removeClass('pwValid');
  64.   }
  65. });
  66.  
  67. function patternTest(pattern, response) {
  68.   if (pattern) {
  69.     addClass(response, 'valid');
  70.   } else {
  71.     removeClass(response, 'valid');
  72.   }
  73. }
  74.  
  75. function addClass(el, className) {
  76.   if (el.classList) {
  77.     el.classList.add(className);
  78.   } else {
  79.     el.className += ' ' + className;
  80.   }
  81. }
  82.  
  83. function removeClass(el, className) {
  84.   if (el.classList)
  85.     el.classList.remove(className);
  86.   else
  87.     el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
  88. }
  89.  
  90. function hasClass(el, className) {
  91.   if (el.classList) {
  92.     return el.classList.contains(className);
  93.   } else {
  94.     new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
  95.   }
  96. }
  97.  
  98. //Show and hide pw
  99. $('#showPW').click(function () {
  100.   if ($(this).hasClass('hide')) {
  101.     $('#password').attr('type', 'text');
  102.     $(this).removeClass('hide');
  103.   } else {
  104.     $('#password').attr('type', 'password');
  105.     $(this).addClass('hide');
  106.   }
  107. });

Codepen 网址:https://codepen.io/andreasstorm/pen/rNNqdwz

服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
免费下载
(0)

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

也想出现在这里?联系我们
创客主机

热评文章

发表评论

精彩推荐

Tabula - 艺术音乐外语培训学校网站WordPress模板

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!