logo

Thông báo

Icon
Error

Chia sẻ
Tùy chọn
Xem
Xem bài viết cuối
Offline Ellry  
#1 Đã gửi : 29/03/2017 lúc 11:36:57(UTC)
Ellry


Danh hiệu: Advanced Member

Chức danh:

Nhóm: Moderator
Gia nhập: 05-10-2015(UTC)
Bài viết: 7,494
Woman
Viet Nam
Đến từ: Tp. Hồ Chí Minh

Được cảm ơn: 21 lần trong 17 bài viết

Validate chuẩn cho password

HTML : 

Mã:
<div id="container">
    <div class="top"></div>
    <div class="middle">
      <div class="left"></div>
      <div class="middle">
        <div id="form-container">

          <div id="all-done">All done</div>

          <form id="verify-new-password">             <label for="verify-password">Verify your password</label>             <input placeholder="Enter your password again" type="password" id="verify-password" name="password-to-verify">             <ul>               <li id="matches-password">Matches new password.</li>             </ul>

            <input type="submit" id="verify-password-submit" value="Confirm password" disabled="disabled">             <button id="go-back">Go back</button>           </form>

          <form id="new-password" class="visible">             <label for="password">Choose a new password</label>             <input placeholder="Enter your password" type="password" id="password" name="password">             <input type="submit" id="password-submit" value="Next">             <br class="clear" />             <ul>               <li id="eight-plus" class="complete">At least 8 characters long.</li>               <li id="uppercase" class="complete">Contains uppercase letters.</li>               <li id="lowercase" class="complete">Contains lowercase letters.</li>               <li id="numbers" class="complete">Contains numbers.</li>               <li id="punctuation" class="complete">Contains punctuation.</li>             </ul>

                       </form>

        </div>       </div>       <div class="right"></div>     </div>     <div class="bottom"></div>   </div>

CSS :

Mã:
$brand-bg: #00A9E0;
.clear {clear:both}
html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  background:darken($brand-bg,10%);
  height: 100%;
  overflow: hidden;
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing:antialiased;
                    font-smoothing:antialiased;
                         font-smooth:always;
}
#password {font-size:1.4rem;font-weight:100}

#all-done {   pointer-events: none;   text-indent: -10000px;   width: 100%;   height: 100%;   //background: url('tick-done.svg') center 35% no-repeat;      position: absolute;   opacity: 0;   -webkit-backface-visibility:hidden;   -webkit-transition:-webkit-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000);      -moz-transition:   -moz-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000);       -ms-transition:    -ms-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000);        -o-transition:     -o-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000);           transition:        transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000);    -webkit-transform:translateX(20px);       -moz-transform:translateX(20px);        -ms-transform:translateX(20px);         -o-transform:translateX(20px);            transform:translateX(20px);   &:after {     content: 'All done!';     font-weight: 100;     font-size: 40px;     color: rgba(255,255,255,0.70);     text-align: center;     width: 100%;     display: block;     position: absolute;     left: 0;     top: 55%;     text-indent: 0;   } }

#all-done:after {   content: 'All done!';   font-weight: 100;   font-size: 40px;   color: rgba(255,255,255,0.70);   text-align: center;   width: 100%;   display: block;   position: absolute;   left: 0;   top: 55%;   text-indent: 0; }

#all-done.visible {   opacity: 1;   -webkit-transform:translateX(0);      -moz-transform:translateX(0);       -ms-transform:translateX(0);        -o-transform:translateX(0);           transform:translateX(0); }

#container {   width: 100%;   height: 100%;   -webkit-perspective: 1000px;      -moz-perspective: 1000px;       -ms-perspective: 1000px;        -o-perspective: 1000px;           perspective: 1000px; }

.middle {width:100%;height:100%}

#form-container {   width: 100%;   height: 100%;   position: relative; }

form {   position: absolute;   width: 100%;   height: 100%;   padding: 0;   margin: 0;   opacity: 0;   -webkit-backface-visibility: hidden;     //background-image:-moz-linear-gradient( -89deg, #FFFFFF 0%, #DBDBDB 100%);  //background-image: -ms-linear-gradient( -89deg, #FFFFFF 0%, #DBDBDB 100%);  //background-image:  -o-linear-gradient( -89deg, #FFFFFF 0%, #DBDBDB 100%);  //background-image:     linear-gradient(-179deg, #FFFFFF 0%, #DBDBDB 100%);  //  // -moz-box-shadow:0px 2px 4px 0px rgba(0,0,0,0.50), inset 0px 1px 7px 0px rgba(255,255,255,0.50);  //      box-shadow:0px 2px 4px 0px rgba(0,0,0,0.50), inset 0px 1px 7px 0px rgba(255,255,255,0.50);  //    -webkit-transition: -webkit-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000);      -moz-transition: -moz-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000);       -ms-transition: -ms-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000);        -o-transition: -o-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000);           transition: transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000);

  -webkit-transform: translateX(20px);      -moz-transform: translateX(20px);       -ms-transform: translateX(20px);        -o-transform: translateX(20px);           transform: translateX(20px); }

form.visible {   opacity: 1;     -webkit-transform: translateX(0);      -moz-transform: translateX(0);       -ms-transform: translateX(0);        -o-transform: translateX(0);           transform: translateX(0); }

form.done {   pointer-events: none;   opacity: 0;   -webkit-transform: translateX(-20px);      -moz-transform: translateX(-20px);       -ms-transform: translateX(-20px);        -o-transform: translateX(-20px);           transform: translateX(-20px); }

label {   //height: 56px;

  //background-image: -moz-linear-gradient( -89deg, #FAFAFA 0%, #EEE 100%);   //background-image:  -ms-linear-gradient( -89deg, #FAFAFA 0%, #EEE 100%);   //background-image:   -o-linear-gradient( -89deg, #FAFAFA 0%, #EEE 100%);   //background-image:      linear-gradient(-179deg, #FAFAFA 0%, #EEE 100%);

  display: block;   font-weight: 100;   font-size: 3rem;   color: #fff;

  text-shadow: 0px 1px 1px $brand-bg;   position: relative; }

label:after {   content: '';   border-bottom:0;   width: 100%;   height: 1px;   position: absolute;   bottom: -2px;   left: 0; }

input[type="password"] {   height: 38px;   line-height: 38px;

  border-radius: 0;   border: 1px solid #CACACA;   background: #FFFFFF;

     font-family: Helvetica;   font-size: 18px;   color: #000;   width: 70%;   float:left;     padding: 0 3% 0 3%;   margin: 6.5% 0 0 0; }

input[type="submit"] {   display:block;

  float: left;   margin: 6.5% 0 0 3%;

  background-image:      linear-gradient(-179deg,  #98C73D 0%, #98C73D 100%);   border: 3px solid #98C73D;   box-shadow: 0 0 0 3px #D0DD2B;        padding: 0 15px;   height: 38px;

  font-size: 16px;   color: white;   text-transform:uppercase;   text-shadow: 0px 1px 1px rgba(0,0,0,0.50);   font-weight: 400;   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  -webkit-transition: background-image 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000);   -moz-transition: background-image 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000);   -ms-transition: background-image 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000);   -o-transition: background-image 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000);   transition: background-image 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000); }

input[type="submit"][disabled] {   border: 3px solid rgba(white,0.3);   box-shadow:none;   text-shadow:none;   color:rgba(white,0.3);   text-transform:uppercase;    background-image:none;   background:transparent;    }

input[type=password] {   -webkit-transition: all 0.30s ease-in-out;   -moz-transition: all 0.30s ease-in-out;   -ms-transition: all 0.30s ease-in-out;   -o-transition: all 0.30s ease-in-out;   outline: none; }   input[type=password]:focus {   box-shadow: 0 0 0 3px #D0DD2B;   border: 1px solid transparent; }

ul {   padding: 0;   margin:3em 0 0 0;   list-style: none;  }

li {   color:rgba(white,0.5);      font-size: 1.7rem;   height: 20px;   line-height: 20px;   margin: 0 0 0.8em 0;   padding: 0 0 0 40px;   /*background: url(tick-grey.svg) 10px 1px no-repeat;*/   position: relative;

  -webkit-transition: color 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000);   -moz-transition: color 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000);   -ms-transition: color 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000);   -o-transition: color 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000);   transition: color 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000);

  -webkit-backface-visibility: visible; }

li:before {   opacity: 1;   text-shadow: none;   content: "\e013";   position: absolute;   left: -25px;   width: 20px;   height: 20px;   /*background: url(tick-green.svg) 0 1px no-repeat;*/ position: relative; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: 400; line-height: 1;   color:darken($brand-bg,15%); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;

  -webkit-transition: -webkit-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),     opacity 100ms ease-out;   -moz-transition: -moz-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),     opacity 100ms ease-out;   -ms-transition: -ms-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),     opacity 100ms ease-out;   -o-transition: -o-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),     opacity 100ms ease-out;   transition: transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),     opacity 100ms ease-out;

  -webkit-transform: scale(1.3);   -moz-transform: scale(1.3);   -ms-transform: scale(1.3);   -o-transform: scale(1.3);   transform: scale(1.3);

  -webkit-backface-visibility: hidden; }

li.complete {   color: rgba(255,255,255,1);  }

li.complete:before {   opacity: 1;   color:#D0DD2B ;   text-shadow: 0px 0px 2px rgba(0,0,0,0.4);   -webkit-transform: scale(1.6);   -moz-transform: scale(1.6);   -ms-transform: scale(1.6);   -o-transform: scale(1.6);   transform: scale(1.6); }

#go-back {   border: none;   background: none;   font-size: 13px;   color: #808080;   line-height: 13px;   text-shadow: 0px 1px 1px #FFFFFF;   float: right;   padding: 0 0 3px 0;   margin: 40px 5% 0 0;   border-bottom: 1px solid #808080;   cursor: pointer; }

@media (min-width: 360px) {

  form {     border-radius: 4px;   }

  label {     border-radius: 4px 4px 0 0;   }

  #container {     width: 100%;     height: 100%;

    display: -webkit-flex;     display: -moz-flex;     display: -ms-flex;     display: -o-flex;     display: flex;

    -webkit-flex-direction: column;     -moz-flex-direction: column;     -ms-flex-direction: column;     -o-flex-direction: column;     flex-direction: column;   }

  .top, .left, .right, .bottom {     flex: 1 1 auto;   }

  .middle {     display: -webkit-flex;     display: -moz-flex;     display: -ms-flex;     display: -o-flex;     display: flex;

    -webkit-flex-direction: row;     -moz-flex-direction: row;     -ms-flex-direction: row;     -o-flex-direction: row;     flex-direction: row;

    flex: 0 0 auto;

    width: auto;     height: auto;   }

  #form-container {     width: 330px;     height: 385px;     position: relative;   }

  form {     position: absolute;     left: 0;     top: 0;   }

  form#verify-new-password {     height: 72%;     top: 14%;   } }

@-webkit-keyframes back {   0% {     -webkit-transform:     scale(1)     rotateY(180deg);   }

  10% {     -webkit-transform:     scale(1.000768)     rotateY(180deg);   }

  20% {     -webkit-transform:     scale(1.024576)     rotateY(180deg);   }

  30% {     -webkit-transform:     scale(1.125424)     rotateY(180.17135717260666deg);   }

  40% {     -webkit-transform:     scale(1.149232)     rotateY(185.48342952341287deg);   }

  50% {     -webkit-transform:     scale(1.15)     rotateY(221.6397929434164deg);   }

  60% {     -webkit-transform:     scale(1.149232)     rotateY(318.3602070565836deg);   }

  70% {     -webkit-transform:     scale(1.125424)     rotateY(354.51657047658716deg);   }

  80% {     -webkit-transform:     scale(1.024576)     rotateY(359.8286428273933deg);   }

  90% {     -webkit-transform:     scale(1.000768)     rotateY(360deg);   }

  100% {     -webkit-transform:     scale(1)     rotateY(360deg);   }

}

@-moz-keyframes back {   0% {     -moz-transform:     scale(1)     rotateY(180deg);   }

  10% {     -moz-transform:     scale(1.000768)     rotateY(180deg);   }

  20% {     -moz-transform:     scale(1.024576)     rotateY(180deg);   }

  30% {     -moz-transform:     scale(1.125424)     rotateY(180.17135717260666deg);   }

  40% {     -moz-transform:     scale(1.149232)     rotateY(185.48342952341287deg);   }

  50% {     -moz-transform:     scale(1.15)     rotateY(221.6397929434164deg);   }

  60% {     -moz-transform:     scale(1.149232)     rotateY(318.3602070565836deg);   }

  70% {     -moz-transform:     scale(1.125424)     rotateY(354.51657047658716deg);   }

  80% {     -moz-transform:     scale(1.024576)     rotateY(359.8286428273933deg);   }

  90% {     -moz-transform:     scale(1.000768)     rotateY(360deg);   }

  100% {     -moz-transform:     scale(1)     rotateY(360deg);   }

}

@-ms-keyframes back {   0% {     -ms-transform:     scale(1)     rotateY(180deg);   }

  10% {     -ms-transform:     scale(1.000768)     rotateY(180deg);   }

  20% {     -ms-transform:     scale(1.024576)     rotateY(180deg);   }

  30% {     -ms-transform:     scale(1.125424)     rotateY(180.17135717260666deg);   }

  40% {     -ms-transform:     scale(1.149232)     rotateY(185.48342952341287deg);   }

  50% {     -ms-transform:     scale(1.15)     rotateY(221.6397929434164deg);   }

  60% {     -ms-transform:     scale(1.149232)     rotateY(318.3602070565836deg);   }

  70% {     -ms-transform:     scale(1.125424)     rotateY(354.51657047658716deg);   }

  80% {     -ms-transform:     scale(1.024576)     rotateY(359.8286428273933deg);   }

  90% {     -ms-transform:     scale(1.000768)     rotateY(360deg);   }

  100% {     -ms-transform:     scale(1)     rotateY(360deg);   }

}

@-o-keyframes back {   0% {     -o-transform:     scale(1)     rotateY(180deg);   }

  10% {     -o-transform:     scale(1.000768)     rotateY(180deg);   }

  20% {     -o-transform:     scale(1.024576)     rotateY(180deg);   }

  30% {     -o-transform:     scale(1.125424)     rotateY(180.17135717260666deg);   }

  40% {     -o-transform:     scale(1.149232)     rotateY(185.48342952341287deg);   }

  50% {     -o-transform:     scale(1.15)     rotateY(221.6397929434164deg);   }

  60% {     -o-transform:     scale(1.149232)     rotateY(318.3602070565836deg);   }

  70% {     -o-transform:     scale(1.125424)     rotateY(354.51657047658716deg);   }

  80% {     -o-transform:     scale(1.024576)     rotateY(359.8286428273933deg);   }

  90% {     -o-transform:     scale(1.000768)     rotateY(360deg);   }

  100% {     -o-transform:     scale(1)     rotateY(360deg);   }

}

@keyframes back {   0% {     transform:     scale(1)     rotateY(180deg);   }

  10% {     transform:     scale(1.000768)     rotateY(180deg);   }

  20% {     transform:     scale(1.024576)     rotateY(180deg);   }

  30% {     transform:     scale(1.125424)     rotateY(180.17135717260666deg);   }

  40% {     transform:     scale(1.149232)     rotateY(185.48342952341287deg);   }

  50% {     transform:     scale(1.15)     rotateY(221.6397929434164deg);   }

  60% {     transform:     scale(1.149232)     rotateY(318.3602070565836deg);   }

  70% {     transform:     scale(1.125424)     rotateY(354.51657047658716deg);   }

  80% {     transform:     scale(1.024576)     rotateY(359.8286428273933deg);   }

  90% {     transform:     scale(1.000768)     rotateY(360deg);   }

  100% {     transform:     scale(1)     rotateY(360deg);   }

}

@-webkit-keyframes front {   0% {     -webkit-transform:     scale(1)     rotateY(0deg);   }

  10% {     -webkit-transform:     scale(1.000768)     rotateY(0deg);   }

  20% {     -webkit-transform:     scale(1.024576)     rotateY(0deg);   }

  30% {     -webkit-transform:     scale(1.125424)     rotateY(0.17135717260665195deg);   }

  40% {     -webkit-transform:     scale(1.149232)     rotateY(5.4834295234128625deg);   }

  50% {     -webkit-transform:     scale(1.15)     rotateY(41.639792943416424deg);   }

  60% {     -webkit-transform:     scale(1.149232)     rotateY(138.36020705658356deg);   }

  70% {     -webkit-transform:     scale(1.125424)     rotateY(174.51657047658713deg);   }

  80% {     -webkit-transform:     scale(1.024576)     rotateY(179.82864282739334deg);   }

  90% {     -webkit-transform:     scale(1.000768)     rotateY(180deg);   }

  100% {     -webkit-transform:     scale(1)     rotateY(180deg);   }

}

@-moz-keyframes front {   0% {     -moz-transform:     scale(1)     rotateY(0deg);   }

  10% {     -moz-transform:     scale(1.000768)     rotateY(0deg);   }

  20% {     -moz-transform:     scale(1.024576)     rotateY(0deg);   }

  30% {     -moz-transform:     scale(1.125424)     rotateY(0.17135717260665195deg);   }

  40% {     -moz-transform:     scale(1.149232)     rotateY(5.4834295234128625deg);   }

  50% {     -moz-transform:     scale(1.15)     rotateY(41.639792943416424deg);   }

  60% {     -moz-transform:     scale(1.149232)     rotateY(138.36020705658356deg);   }

  70% {     -moz-transform:     scale(1.125424)     rotateY(174.51657047658713deg);   }

  80% {     -moz-transform:     scale(1.024576)     rotateY(179.82864282739334deg);   }

  90% {     -moz-transform:     scale(1.000768)     rotateY(180deg);   }

  100% {     -moz-transform:     scale(1)     rotateY(180deg);   }

}

@-ms-keyframes front {   0% {     -ms-transform:     scale(1)     rotateY(0deg);   }

  10% {     -ms-transform:     scale(1.000768)     rotateY(0deg);   }

  20% {     -ms-transform:     scale(1.024576)     rotateY(0deg);   }

  30% {     -ms-transform:     scale(1.125424)     rotateY(0.17135717260665195deg);   }

  40% {     -ms-transform:     scale(1.149232)     rotateY(5.4834295234128625deg);   }

  50% {     -ms-transform:     scale(1.15)     rotateY(41.639792943416424deg);   }

  60% {     -ms-transform:     scale(1.149232)     rotateY(138.36020705658356deg);   }

  70% {     -ms-transform:     scale(1.125424)     rotateY(174.51657047658713deg);   }

  80% {     -ms-transform:     scale(1.024576)     rotateY(179.82864282739334deg);   }

  90% {     -ms-transform:     scale(1.000768)     rotateY(180deg);   }

  100% {     -ms-transform:     scale(1)     rotateY(180deg);   }

}

@-o-keyframes front {   0% {     -o-transform:     scale(1)     rotateY(0deg);   }

  10% {     -o-transform:     scale(1.000768)     rotateY(0deg);   }

  20% {     -o-transform:     scale(1.024576)     rotateY(0deg);   }

  30% {     -o-transform:     scale(1.125424)     rotateY(0.17135717260665195deg);   }

  40% {     -o-transform:     scale(1.149232)     rotateY(5.4834295234128625deg);   }

  50% {     -o-transform:     scale(1.15)     rotateY(41.639792943416424deg);   }

  60% {     -o-transform:     scale(1.149232)     rotateY(138.36020705658356deg);   }

  70% {     -o-transform:     scale(1.125424)     rotateY(174.51657047658713deg);   }

  80% {     -o-transform:     scale(1.024576)     rotateY(179.82864282739334deg);   }

  90% {     -o-transform:     scale(1.000768)     rotateY(180deg);   }

  100% {     -o-transform:     scale(1)     rotateY(180deg);   }

}

@keyframes front {   0% {     transform:     scale(1)     rotateY(0deg);   }

  10% {     transform:     scale(1.000768)     rotateY(0deg);   }

  20% {     transform:     scale(1.024576)     rotateY(0deg);   }

  30% {     transform:     scale(1.125424)     rotateY(0.17135717260665195deg);   }

  40% {     transform:     scale(1.149232)     rotateY(5.4834295234128625deg);   }

  50% {     transform:     scale(1.15)     rotateY(41.639792943416424deg);   }

  60% {     transform:     scale(1.149232)     rotateY(138.36020705658356deg);   }

  70% {     transform:     scale(1.125424)     rotateY(174.51657047658713deg);   }

  80% {     transform:     scale(1.024576)     rotateY(179.82864282739334deg);   }

  90% {     transform:     scale(1.000768)     rotateY(180deg);   }

  100% {     transform:     scale(1)     rotateY(180deg);   } }

Javascript : 

Mã:
// Demo from http://www.aerotwist.com/blog/better-password-form-fields/

(function() {   var container = document.getElementById('container');

  var eightPlus = document.getElementById('eight-plus');   var uppercase = document.getElementById('uppercase');   var lowercase = document.getElementById('lowercase');   var numbers = document.getElementById('numbers');   var punctuation = document.getElementById('punctuation');   var matchesPassword = document.getElementById('matches-password');

  var passwordSubmitBtn = document.getElementById('password-submit');   var passwordInput = document.getElementById('password');   var passwordForm = document.getElementById('new-password');

  var verifyPasswordSubmitBtn = document.getElementById('verify-password-submit');   var verifyPasswordInput = document.getElementById('verify-password');   var verifyPasswordForm = document.getElementById('verify-new-password');   var goBack = document.getElementById('go-back');

  var allDone = document.getElementById('all-done');

  var containsUppercase = /[A-Z]/;   var containsLowercase = /[a-z]/;   var containsNumbers = /[0-9]/;   var containsPunctuation = /[^\w\s]|_/;

  function setForm() {     eightPlus.classList.remove('complete');     uppercase.classList.remove('complete');     lowercase.classList.remove('complete');     numbers.classList.remove('complete');     punctuation.classList.remove('complete');     passwordSubmitBtn.disabled = true;   }

  passwordInput.addEventListener('input', function() {

    var value = passwordInput.value;

    // More than 8 characters     if (value.length >= 8)       eightPlus.classList.add('complete');     else       eightPlus.classList.remove('complete');

    // Contains uppercase     if (containsUppercase.test(value))       uppercase.classList.add('complete');     else       uppercase.classList.remove('complete');

    // Contains lowercase     if (containsLowercase.test(value))       lowercase.classList.add('complete');     else       lowercase.classList.remove('complete');

    // Contains numbers     if (containsNumbers.test(value))       numbers.classList.add('complete');     else       numbers.classList.remove('complete');

    // Contains punctuation     if (containsPunctuation.test(value))       punctuation.classList.add('complete');     else       punctuation.classList.remove('complete');

    var passwordIsValid = (value.length >= 8) &&         containsUppercase.test(value) &&         containsLowercase.test(value) &&         containsNumbers.test(value) &&         containsPunctuation.test(value);

    passwordSubmitBtn.disabled = !passwordIsValid;

  });

  verifyPasswordInput.addEventListener('input', function() {     var passwordsDoMatch = verifyPasswordInput.value === passwordInput.value;

    if (passwordsDoMatch)       matchesPassword.classList.add('complete');     else       matchesPassword.classList.remove('complete');

    verifyPasswordSubmitBtn.disabled = !passwordsDoMatch;   });

  passwordForm.addEventListener('submit', function(evt) {     passwordForm.classList.add('done');     setTimeout(function() {       verifyPasswordForm.reset();       verifyPasswordForm.classList.add('visible');       verifyPasswordInput.focus();       matchesPassword.classList.remove('complete');     }, 400);     evt.preventDefault();   });

  verifyPasswordForm.addEventListener('submit', function(evt) {     verifyPasswordForm.classList.add('done');     setTimeout(function() {       allDone.classList.add('visible');     }, 400);     evt.preventDefault();   });

  goBack.addEventListener('click', function(evt) {     verifyPasswordForm.classList.remove('visible');     setTimeout(function() {       passwordForm.classList.remove('done');       passwordInput.focus();     }, 400);     evt.preventDefault();   });

  window.addEventListener('load', function() {     passwordForm.classList.add('visible');     setForm();   }); })();

Link demo : http://codepen.io/allusis/pen/HcriG

Ai đang xem chủ đề này?
OceanSpiders 2.0
Di chuyển  
Bạn không thể tạo chủ đề mới trong diễn đàn này.
Bạn không thể trả lời chủ đề trong diễn đàn này.
Bạn không thể xóa bài của bạn trong diễn đàn này.
Bạn không thể sửa bài của bạn trong diễn đàn này.
Bạn không thể tạo bình chọn trong diễn đàn này.
Bạn không thể bỏ phiếu bình chọn trong diễn đàn này.

| Cung cấp bởi YAF.NET 2.2.4.14 | YAF.NET © 2003-2021, Yet Another Forum.NET
Thời gian xử lý trang này hết 2.273 giây.