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 相关文章推荐
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
Dec 30 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
javascript实现画不相交的圆
Apr 07 Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
Dec 01 Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 Javascript
简单实现bootstrap选项卡效果
Feb 08 Javascript
vue-router中的hash和history两种模式的区别
Jul 17 Javascript
JS 封装父页面子页面交互接口的实例代码
Jun 25 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+javascript的日历控件
2009/11/19 PHP
php学习之 循环结构实现代码
2011/06/09 PHP
PHP的可变变量名的使用方法分享
2012/02/05 PHP
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
详解php反序列化
2020/06/10 PHP
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
jquery列表拖动排列(由项目提取相当好用)
2014/06/17 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
深入理解移动前端开发之viewport
2018/10/19 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
django的model操作汇整详解
2019/07/26 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
英国奢侈品网站:MatchesFashion
2016/12/16 全球购物
类如何去实现接口
2013/12/19 面试题
《和田的维吾尔》教学反思
2014/04/14 职场文书
公司任命书范本
2014/06/04 职场文书
运动会宣传口号
2014/06/09 职场文书
药剂专业求职信
2014/06/20 职场文书
2015年幼儿园元旦亲子活动方案
2014/12/09 职场文书
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python
redis protocol通信协议及使用详解
2022/07/15 Redis