利用Vue做一个简单的密码强度检测页面+含源代码分享

最新推荐文章于 2024-06-03 10:35:55 发布

酷的没边

最新推荐文章于 2024-06-03 10:35:55 发布

阅读量1k

点赞数

文章标签： vue.js css javascript html es6

本文链接：https://blog.csdn.net/weixin_45802744/article/details/108212427

版权

基本效果是如图中所示

代码我存储在一个文件夹two中，分如下几个模块

先看主页面index.html的：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue输入验证</title>
		<link rel="stylesheet" href="css/min.css">
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
	<div id="app">
	  <h2>密码强度</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="{ uppercase_valid: contains_uppercase }">大写字母</p>
	     <p v-bind:class="{ number_valid: contains_number }">数字</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>
		
		<script src="js/vue.min.js"></script> 
		<script src="js/index.js"></script>
	</body>
</html>

css部分：

min.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}

style.css如下：

html {
  box-sizing: border-box;
}

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

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

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: #f47920;
  text-align: center;
  margin-bottom: 18px;
}

.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: #000000;
  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 #f47920;
}

.password_length {
  padding: 2px 10px;
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background: #f47920;
  color: #000000;
  border-radius: 80px;
  font-size: 15px;
  display: none;
  -webkit-transition: all .1s;
  transition: all .1s;
}

.valid_password_length {
  background: #f47920;
  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: 5px;
  position: relative;
  background:  #f47920;
  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;
  }
}

JS部分

vue.min.js:

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.Vue=t()}(this,function(){"use strict";function e(e){return null==e?"":"object"==typeof e?JSON.stringify(e,null,2):String(e)}function t(e){var t=parseFloat(e);return isNaN(t)?e:t}function n(e,t){for(var n=Object.create(null),r=e.split(","),i=0;i<r.length;i++)n[r[i]]=!0;return t?function(e){return n[e.toLowerCase()]}:function(e){return n[e]}}function r(e,t){if(e.length){var n=e.indexOf(t);if(n>-1)return e.splice(n,1)}}function i(e,t){return Ni.call(e,t)}function o(e){return"string"==typeof e||"number"==typeof e}function a(e){var t=Object.create(null);return function(n){var r=t[n];return r||(t[n]=e(n))}}function s(e,t){function n(n){var r=arguments.length;return r?r>1?e.apply(t,arguments):e.call(t,n):e.call(t)}return n._length=e.length,n}function c(e,t){t=t||0;for(var n=e.length-t,r=new Array(n);n--;)r[n]=e[n+t];return r}function u(e,t){for(var n in t)e[n]=t[n];return e}function l(e){return null!==e&&"object"==typeof e}function f(e){return Ri.call(e)===Fi}function p(e){for(var t={},n=0;n<e.length;n++)e[n]&&u(t,e[n]);return t}function d(){}function v(e){return e.reduce(function(e,t){return e.concat(t.staticKeys||[])},[]).join(",")}function h(e,t){var n=l(e),r=l(t);if(!n||!r)return!n&&!r&&String(e)===String(t);try{return JSON.stringify(e)===JSON.stringify(t)}catch(n){return e===t}}function m(e,t){for(var n=0;n<e.length;n++)if(h(e[n],t))return n;return-1}function g(e){var t=!1;return function(){t||(t=!0,e())}}function y(e){return/native code/.test(e.toString())}function _(e){var t=(e+"").charCodeAt(0);return 36===t||95&#

最低0.47元/天解锁文章

酷的没边

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用Vue做一个简单的密码强度检测页面+含源代码分享

基本效果是如图中所示代码我存储在一个文件夹two中，分如下几个模块先看主页面index.html的：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue输入验证</title> <link rel="stylesheet" href="css/min.css"> <link rel="stylesheet"
复制链接

扫一扫