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


Posted in Javascript onOctober 18, 2019

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

1. 概述

1.1 说明

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

1.2 条件与思路

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

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

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

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

 2. 实例

 2.1 密码验证提示组件

<template>
 <div class="pwdTipContent" v-show="isShowTip">
 <dl>
 <dt>
 <i class="iWeak" :class="{active: degreeNumber >= 3 , normal: degreeNumber==1 || degreeNumber == 2}"></i>
 <i class="iMiddle" :class="{active: degreeNumber >= 3, normal: degreeNumber == 2}"></i>
 <i class="iStrong" :class="{active:degreeNumber>=3}"></i>
 <b class="degreeWeak" v-show='degreeNumber==1'>弱</b>
 <b class="degreeMiddle" v-show='degreeNumber==2'>中</b>
 <b class="degreeStrong" v-show='degreeNumber>=3'>强</b>
 </dt>
 <dd>
 <i :class="{'el-icon-warning': !bPwd, 'active': bPwd === false, 'el-icon-success': bPwd}"></i>8-24 位
 </dd>
 </dl>
 </div>
</template>
<script>
 export default {
 name: "verifyPassWordTip",
 props: {
 password: {
 type: String
 },
 isShowTip: {
 type: Boolean
 }
 },
 data() {
 return {
 bPwd: null,//密码值和长度的验证
 degreeNumber: 0//密码复杂度的验证
 };
 },
 watch: {
 password() {
 this.initPassWord();
 }
 },
 methods: {
 /**
 * 密码加载
 **/
 initPassWord() {
 if (!this.password) {
  this.$data.bPwd = null; //没有值标签背景置灰
  this.$data.degreeNumber=0;
 } else {
  let objReturn = this.passwordValid(this.password);
  if (objReturn) {
  this.$data.bPwd = objReturn.bPwd;
  this.$data.degreeNumber = objReturn.degreeNumber;
  }
 }
 },
 /**
 * 密码验证(密码复杂度:(1)大写字母(2)小写字母(3)数字(4)特殊符号,密码至少需包含上述情形中的三种)
 * @param valPWD输入的密码信息
 * @return 返回验证信息
 **/
 passwordValid(valPwd) {
 let msg = "";
 let degreeNumber = 0;
 let bPwd = false;

 if (valPwd == null || valPwd.length < 8 || valPwd.length > 24 || valPwd.trim().length == "") {
  bPwd = false;
 } else {
  bPwd = true;
 }
 let arrVerify = [
  {regName: 'Number', regValue: /^.*[0-9]+.*/},
  {regName: 'LowerCase', regValue: /^.*[a-z]+.*/},
  {regName: 'UpperCase', regValue: /^.*[A-Z]+.*/},
  {regName: 'SpecialCharacters', regValue: /^.*[^a-zA-Z0-9]+.*/}
 ];
 let regNum = 0;// 记录匹配的次数
 for (let iReg = 0; iReg < arrVerify.length; iReg++) {
  if (arrVerify[iReg].regValue.test(valPwd)) {
  regNum = regNum + 1;
  }
 }
 degreeNumber = regNum;
 if (regNum <= 2) {
  msg = "密码必须包含大小写字母和数字";
 }
 let objReturn = {
  msg: msg,
  degreeNumber: degreeNumber,
  bPwd: bPwd
 };
 return objReturn;
 }
 }
 }
</script>
<style>
 .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;
 }
</style>

2.2 页面中引用提示组件

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

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

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

<template>
 <div style="position: absolute; top: 40%; left:40%">
 <el-row style="width: 300px;">
 <el-col :span="24">
 <el-input v-model="password" @focus.capture.native='changePasswordTip(true)' @blur.capture.native='changePasswordTip(false)' auto-complete="new-password" type="password" placeholder='请输入密码' ></el-input>
 <div style="position: absolute">
  <verify-pass-word-tip :password="password" :isShowTip = 'isShowTip'></verify-pass-word-tip>
 </div>
 </el-col>
 </el-row>
 </div>
</template>
<script>
 import verifyPassWordTip from './verifyPassWordTip'
 export default {
 name: "VerifyPassWord",
 components: {
 verifyPassWordTip
 },
 data() {
 return {
 password: '',
 isShowTip: false
 }
 },
 methods: {
 /**
 * 改变密码提示是否显示
 **/
 changePasswordTip(isShow) {
 if (isShow) {
  this.isShowTip = true;
 } else {
  this.isShowTip = false;
 }
 },
 }
 }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 判断元素上是否绑定了事件
Oct 28 Javascript
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
轻轻松松学JS调试(不下载任何工具)
Apr 14 Javascript
jQuery获得内容和属性示例代码
Jan 16 Javascript
Es6 写的文件import 起来解决方案详解
Dec 13 Javascript
Angular2搜索和重置按钮过场动画
May 24 Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
详解vue组件中使用路由方法
Feb 12 Javascript
webpack结合express实现自动刷新的方法
May 07 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 Javascript
Vue表单控件数据绑定方法详解
Feb 05 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
Dec 16 Javascript
VUE实现图片验证码功能
Nov 18 #Javascript
countUp.js实现数字滚动效果
Oct 18 #Javascript
Vue-cli3项目引入Typescript的实现方法
Oct 18 #Javascript
细述Javascript的加法运算符的具体使用
Oct 18 #Javascript
ElementUI之Message功能拓展详解
Oct 18 #Javascript
js实现简易计算器功能
Oct 18 #Javascript
JavaScript实现更换背景图片
Oct 18 #Javascript
You might like
以文本方式上传二进制文件的PHP程序
2006/10/09 PHP
一个PHP+MSSQL分页的例子
2006/10/09 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
Thinkphp微信公众号支付接口
2016/08/04 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
PHP中register_shutdown_function函数的基础介绍与用法详解
2017/11/28 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
解析jquery中的ajax缓存问题
2013/12/19 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
快速学习AngularJs HTTP响应拦截器
2015/12/31 Javascript
nodejs基础知识
2017/02/03 NodeJs
vue.js中指令Directives详解
2017/03/20 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
2020/12/30 jQuery
jQuery实现全选按钮
2021/01/01 jQuery
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
Python 开发Activex组件方法
2009/11/08 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
如何让python的运行速度得到提升
2020/07/08 Python
pandas针对excel处理的实现
2021/01/15 Python
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
超市端午节活动方案
2014/01/23 职场文书
揠苗助长教学反思
2014/02/04 职场文书
学生检讨书如何写
2014/10/30 职场文书
大三学生英语考试作弊检讨书
2015/01/01 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
个人工作总结(管理人员)范文
2019/08/13 职场文书
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA