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> <p v-bind:class="{ number_valid: contains_number }">数字</p> <p v-bind:class="{ uppercase_valid: contains_uppercase }">大写字母</p> </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,canv锾攒揉敫as,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、查看效果。