html+css3+js表单密码带强度验证特效

1、新建html文档。

2、书写hmtl代码。

<div id="app">

  <h2>html5密码强度显示</h2>

  <div class="input_container">

    <input type="password" @input="p_len" v-model="password" placeholder="输入密码" />

    <span v-bind:class="{ valid_password_length: valid_password_length , show_password_length: typed}" class="password_length">{{password_length}}</span> </div>

  <div class="lnu_container">

    <p v-bind:class="{ lovercase_valid: contains_lovercase }">小写字母

    <p v-bind:class="{ number_valid: contains_number }">数字

    <p v-bind:class="{ uppercase_valid: contains_uppercase }">大写字母

  </div>

  <div class="valid_password_container" v-bind:class="{show_valid_password_container : valid_password }">

    <svg width="100%" height="100%" viewBox="0 0 140 100">

      <path class="tick" v-bind:class="{checked: valid_password }" 

          d="M10,50 l25,40 l95,-70" />

    </svg>

  </div>

</div>

3、书写css代码。

button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0} menu,article,aside,details,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{}button,select{text-transform:none}[type=submit], [type=reset],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}html { box-sizing: border-box; }

*, *:before, *:after { box-sizing: inherit; padding: 0; margin: 0; }

body { font-family: 'Montserrat', sans-serif; line-height: 1.5; letter-spacing: 1px; }

 input[type="password"]::-webkit-input-placeholder {

 color: rgba(71, 87, 98, 0.8);

}

 input[type="password"]::input-placeholder {

 color: rgba(71, 87, 98, 0.8);

}

#app { width: 350px; height: auto; padding: 10px; text-align: center; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

#app h2 { font-size: 25px; color: #475762; text-align: center; margin-bottom: 20px; }

.input_container { display: block; margin: 0 auto; width: 320px; height: auto; position: relative; border-radius: 4px; overflow: hidden; margin-bottom: 10px; }

#app input[type="password"] { width: 320px; height: auto; border: 1px solid transparent; background: #EEEEEE; color: #475762; font-size: 15px; border-radius: 4px; padding: 12px 5px; overflow: hidden; outline: none; -webkit-transition: all .1s; transition: all .1s; }

#app input[type="password"]:focus { border: 1px solid #2196F3; }

.password_length { padding: 2px 10px; position: absolute; top: 50%; right: 10px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: #FBD490; color: rgba(71, 87, 98, 0.8); border-radius: 4px; font-size: 13px; display: none; -webkit-transition: all .1s; transition: all .1s; }

.valid_password_length { background: #00AD7C; color: rgba(255, 255, 255, 0.9); }

.show_password_length { display: block; }

.lnu_container { display: block; margin: 10px auto; width: 320px; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

.lnu_container p { width: 100px; height: auto; font-size: 12px; line-height: 1.2; text-align: center; border-radius: 2px; color: rgba(71, 87, 98, 0.8); background: -webkit-linear-gradient(left, #00AD7C 50%, #eee 50%); background: linear-gradient(to right, #00AD7C 50%, #eee 50%); background-size: 201% 100%; background-position: right; -webkit-transition: background .3s; transition: background .3s; }

.lovercase_valid, .number_valid, .uppercase_valid { background-position: left !important; color: rgba(255, 255, 255, 0.9) !important; }

.valid_password_container { display: block; margin: 10px auto; border-radius: 4px; position: relative; background: #00AD7C; width: 20px; height: 20px; visibility: hidden; opacity: 0; }

.show_valid_password_container { visibility: visible; opacity: 1; }

.tick { width: 100%; height: 100%; fill: none; stroke: white; stroke-width: 25; stroke-linecap: round; stroke-dasharray: 180; stroke-dashoffset: 180; }

.checked { -webkit-animation: draw 0.5s ease forwards; animation: draw 0.5s ease forwards; }

 @-webkit-keyframes draw {  to {

 stroke-dashoffset: 0;

}

}

 @keyframes draw {  to {

 stroke-dashoffset: 0;

}

}

4、书写并添加js代码。

<script src="js/vue.min.js"></script> 

<script src="js/index.js"></script>

5、书写index.js代码。

var app = new Vue({

  el: "#app",

  data: {

    password: null,

    password_length: 0,

    typed: false,

    contains_lovercase: false,

    contains_number: false,

    contains_uppercase: false,

    valid_password_length: false,

    valid_password: false

  },

  methods: {

    p_len: function() {

      this.password_length = this.password.length;

      if (this.password_length > 7) {

        this.valid_password_length = true;

      } else {

        this.valid_password_length = false;

      }

      if (this.password_length > 0) {

        this.typed = true;

      } else {

        this.typed = false;

      }

      this.contains_lovercase = /[a-z]/.test(this.password);

      this.contains_number = /\d/.test(this.password);

      this.contains_uppercase = /[A-Z]/.test(this.password);

      // Check if the password is valid

      if (this.contains_lovercase == true && this.contains_number == true) {

        this.valid_password = false;

        if (

          this.contains_uppercase == true &&

          this.valid_password_length == true

        )

          this.valid_password = true;

      } else {

        this.valid_password = false;

      }

    }

  }

});

6、代码整体结构。

7、查看效果。