密码强度校验

小許同学

于 2023-05-19 15:26:41 发布

阅读量183

点赞数

分类专栏： vue 文章标签： javascript vue.js 开发语言

本文链接：https://blog.youkuaiyun.com/weixin_45173576/article/details/130767472

版权

vue 专栏收录该内容

11 篇文章

订阅专栏

实现密码强度校验

在这里插入图片描述

js部分，拿到的num决定div亮几个。

// 密码输入校验强度
changePwd() {
   let str = this.newPassword
    this.newPassword = str.replace(/[^\w\S&.?!@#$%]/,'')

    console.log(this.newPassword)
    if(this.newPassword.length >= 8) {
        let num = this.pwdStrength(this.newPassword)
        this.pwdProgress.num = num
        this.pwdProgress.color = this.pwdStrength_color(num)
    } else {
        this.pwdProgress.num = 2
    }
},
// 获取密码强度
pwdStrength(pwd) {
    var  sum  =  [ 0 ,  0 ,  0 ,  0 ];
    for  ( var  i = 0 ; i < pwd.length; i ++ ) {
        var  c  =  pwd.charCodeAt(i);
        if  (c  >= 48   &&  c  <= 57 )   // 数字
            sum[ 0 ]  =   1 ;
        else   if  (c  >= 65   &&  c  <= 90 )  // 大写字母
            sum[ 1 ]  =   1 ;
        else   if  (c  >= 97   &&  c  <= 122 )  // 小写字母
            sum[ 2 ]  =   1 ;
        else   // 特殊字符
            sum[ 3 ]  =   1 ; 
    }
    var  level  =  sum[ 0 ]  +  sum[ 1 ]  +  sum[ 2 ]  +  sum[ 3 ];
    let num = 2
    if(pwd.length >= 8 && level >= 2) num = 3;
    if(pwd.length > 10 && level == 3) num = 4;
    if(pwd.length > 10 && level >= 4) num = 5;
    return num
},
// 获取密码强度对应的颜色
pwdStrength_color(num) {
    var  names  =  ['#ff6666', ' #ff6666 ' ,  ' #ff6666 ' ,  ' #e3bd75 ' ,  ' #66cc66 ' ,  ' #009900 '];
    let color = names[num]
    return color
},

html 部分

<div 
    class="my-progress" 
    v-for="(item, index) in new Array(progressNum)" 
    :key="index"
    :style="pwdProgress.num -1 >= index ?`background:${pwdProgress.color}` : ''"
></div>

vue data部分

progressNum: 5,// 渲染5个。
pwdProgress: {
    num: 0,// 控制亮几个
    color: '#D8D8D8',// 高亮的颜色
}