VUE实现密码验证与提示功能

本文实例为大家分享了VUE密码验证与提示功能的具体代码，供大家参考，具体内容如下

1. 概述

1.1 说明

　　vue项目中，为了较为明了的让用户看到所输入的密码信息的长度与复杂度是否满足要求，开发一个组件来满足此需求(当密码输入时进行密码验证操作，当密码的长度在8到24位之间，密码中包含数字/小写字母/大写字母/特殊字符中的三项或三项以上则位正确)。

1.2 条件与思路

　　1.密码框得到焦点显示提示信息

　　2.验证密码长度在8到24位之间

　　3.验证密码复杂度(数字/小写字母/大写字母/特殊字符三项或三项以上)

　　4.密码框失去焦点隐藏提示信息

 2. 实例

 2.1 密码验证提示组件

 .pwdTipContent .el-icon-warning{
 color:gray;
 }
 .pwdTipContent .el-icon-warning.active{
 color:red;
 }
 .pwdTipContent i.gray{
 color: gray;
 }
 .pwdTipContent .degreeWeak , .pwdTipContent .degreeMiddle{
 color: red;
 }
 .pwdTipContent .el-icon-success{
 color:green;
 }
 .pwdTipContent .degreeStrong {
 color: green;
 }
 i.iWeak.normal, i.iMiddle.normal {
 background: red;
 }
 i.iWeak.active {
 background: green;
 }
 i.iMiddle.active {
 background: green;
 }
 i.iStrong.active {
 background: green;
 }
 b.active {
 color: red;
 }
 .degreeStrong {
 color: green;
 }

 .pwdTipContent dt i {
 width: 28px;
 height: 10px;
 display: inline-block;
 background-color: gray;
 margin-right: 10px;
 }

 .pwdTipContent {
 color: #61688a;
 position: absolute;
 min-width: 200px;
 padding: 7px 0 7px 15px;
 background: #fff;
 top: -147px;
 border: 1px solid #e4e7ed;
 border-radius: 4px;
 box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.4);
 font-size: 12px;
 }

 .pwdTipContent:after {
 width: 0;
 height: 0;
 overflow: hidden;
 content: "";
 }
 .pwdTipContent:after {
 position: absolute;
 bottom: -10px;
 left: 20px;
 border-top: 10px solid #fff;
 border-right: 10px dashed transparent;
 border-left: 10px dashed transparent;
 }
 .pwdTipContent dd, .pwdTipContent dt{
 text-align: left;
 }

2.2 页面中引用提示组件

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。