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 相关文章推荐
层序遍历在ExtJs的TreePanel中的应用
Oct 16 Javascript
javascript调试说明
Jun 07 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
javascript ajax 仿百度分页函数
Oct 29 Javascript
javascript获取所有同类checkbox选项(实例代码)
Nov 07 Javascript
JS判断表单输入是否为空(示例代码)
Dec 23 Javascript
jQuery中的siblings用法实例分析
Dec 24 Javascript
javascript中获取class的简单实现
Jul 12 Javascript
基于javascript实现的购物商城商品倒计时实例
Dec 11 Javascript
js异步上传多张图片插件的使用方法
Oct 22 Javascript
JavaScript代码调试方法实例小结
Jan 05 Javascript
详解关于微信setData回调函数中的坑
Feb 18 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
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
PHP通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
php三种实现多线程类似的方法
2015/10/30 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
Bootstrap 附加导航(Affix)插件实例详解
2016/06/01 Javascript
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
JS代码触发事件代码实例
2020/01/02 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
python函数装饰器用法实例详解
2015/06/04 Python
python中字符串的操作方法大全
2018/06/03 Python
python使用Matplotlib画饼图
2018/09/25 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
python动态视频下载器的实现方法
2019/09/16 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
大学生校园创业计划书
2014/02/08 职场文书
保安岗位职责
2014/02/21 职场文书
道路建设实施方案
2014/03/18 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
大学英语演讲稿范文
2014/04/24 职场文书
维护民族团结演讲稿
2014/08/27 职场文书
工艺技术员岗位职责
2015/02/04 职场文书
python中print格式化输出的问题
2021/04/16 Python
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang
24年收藏2000多部退役军用电台
2022/02/18 无线电
java后台调用接口及处理跨域问题的解决
2022/03/24 Java/Android