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

本文分享VUE密码验证和提示功能的具体代码，供大家参考。具体内容如下

1.概观

1.1描述

在vue项目中，为了让用户看清楚输入的密码信息的长度和复杂度是否符合要求，开发了一个组件来满足这一要求(输入密码时，进行密码验证操作；当密码长度在8到24位之间时，密码包含三个或更多的数字/小写字母/大写字母/特殊字符，并且数字是正确的)。

1.2条件和想法

1.密码框获取焦点显示提示信息

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

3.验证密码复杂性(三个或更多数字/小写字母/大写字母/特殊字符)

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

2.例子

2.1密码验证提示组件

模板div class=' pwdTipContent ' v-show=' is show tip ' dl dt I class=' iWeak ' : class=' { active : degren number=3，normal : degren number==1 | | degren number==2 } '/I class=' mid le ' : class=' { active : degren number=3，normal : degreennumber==2 } /I class='弱b类=' degree midl ' v-show=' degree number==2 '中b类=' degree sterong ' v-show=' degree number=3 '强/dt DD I : class=' { ' El-icon-warning ' : bPwd，' active': bPwd===false，' El-icon-success ' : bPwd } '/i8-24位/dd /dl /div/templatescript导出默认值{ name: 'verifyPassWordTip '，prop : { password : { type : String }，is show tip : { type : Boolean } }，data() { return { bPwd: null，//密码值和长度的验证度数： 0/密码复杂度的验证};}，观看： { password(){ this。init password()；} }，methods: { /** *密码加载**/initPassWord() { if(！这个。密码){ 0这个$ data.bPwd=null//没有值标签背景置灰这个$数据。dedennumber=0；} else {让objReturn=this。密码有效(这。密码)；if(ObJect){ this .$数据。BPWd=ObJreturn。BPWd这个$数据。degreenumber=Objreturn。度数；} } }, /** * 密码验证（密码复杂度：(1)大写字母(2)小写字母(3)数字(4)特殊符号，密码至少需包含上述情形中的三种)* @param valPWD输入的密码信息* @返回返回验证信息* */密码有效(valPwd){ let msg=' '；让dedennumber=0；让bPwd=false if(val pwd==null | | val pwd。长度8 | | val pwd。长度24 | | val pwd。trim().length==' '){ BPWd=false；} else { bPwd=true}让arr验证=[{ regname : ' number '，regValue: /^.*[0-9] .*/}，{regName: '小写/^. regvalue :*[a-z].*/}，{regName: '大写/^. regvalue :*[阿-日]20 .*/}，{ regname: ' specialcharacters '，regValue: /^.*[^a-zA-Z0-9]。*/} ];让RegNum=0；//记录匹配的次数用于(设IReg=0；iReg arr verify . length iReg){ if(arr verify[iReg]。RegVaLue。test(Valpwd)){ RegNum=RegNum 1；} } degree number=RegNumif(RegNum=2){ msg='密码必须包含大小写字母和数字；}让objReturn={ msg: msg，degreeNumber: degreeNumber，bPwd : bPwd }；return ObJect } } }/script style .pwdTipContent .圣像-警告{ color:gray}。pwdTipContent .图标警告。活动{ color :红色；} .pwdTipContent I . gray { color : gray；} .pwdTipContent .学位，学位.pwdTipContent .度数中间{ color:红色；} .pwdTipContent .El-icon-success { color :绿色；} .pwdTipContent .{ color:绿色；} I . I wake . normal，I . middle。正常{背景：红色；我会说。活动{背景：绿色；}我.中间。活动{背景：绿色；}我是. iStrong。活动{背景：绿色；} b.active { color: red}。{ color:绿色；} .pwdTipContent dt I { width : 28px；高度： 10pxdisplay:内联块；背景-颜色：灰色；右边距： 10px} .pwdTipContent { color : # 61688 a；绝对位置：最小宽度： 200像素；padding: 7px 0 7px 15px背景# fff top :-147 px；border: 1px实心# e4e 7 ed边界半径： 4pxbox-shadow: 0 4px 12px 0 rgba(0，0，0，0.4)；font-size : 12px} .{ width : 0；高度： 0;飞越：隐藏；内容： " "；} .{ position :绝对值后的pwdtipcontents :底部：-10px；左侧： 20像素边框-top: 10px实心# fffborder-right: 10px虚线透明；边框-左： 10px虚线透明；} .pwdTipContent，dd .pwdTipContent dt { text-align : left；}/style2.2页面中引用提示组件

模板div style=' position :绝对值；前：名40%；左侧：40% ' El-row style=' width : 300 px；'El-col : span=' 24 ' El-输入v-model=' password ' @ focus。捕捉。native=' changepasswordpip(true)' @ blur。捕捉。native=' changepasswordpip(false)' auto-complete=' new-password ' type=' password ' placeholder='请输入密码/El-input div style=' position : absolute ' verify-pass-word-tip : password=' password ' : is show tip=' is show tip '/verify-pass-word-tip/div/El-col-row/div/模板脚本导入验证密码tip from ' ./verify password tip ' export default { name : ' verify password '，components 3360 { verify password tip }，data() { return { password: ' '，isShowTip: false } }，methods: { /** *改变密码提示是否显示* */ChangePassWordTip(IsShow){ if(IsShow){ this。IsShowTip=true} else { this.isShowTip=false} }，}/脚本以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。