验证密码的强中弱程度——正则表达式

最新推荐文章于 2024-05-11 15:11:58 发布

LullabyLY

最新推荐文章于 2024-05-11 15:11:58 发布

阅读量2.2k

点赞数

本文链接：https://blog.csdn.net/qq_42853241/article/details/92228254

版权

最近在做一个项目，里面包含了注册页面，正好学习了正则表达式，就练习练习。

验证密码的强中弱程度：

密码可以是数字、字母、特殊符号加_（在正则表达式中，_不算特殊符号）
假如密码只有一种：只有数字、只有字母、或者只有符号，密码为弱，显示红色
假如密码由两种组合：由数字和字母、由数字和符号，或者字母和符合，密码为中，显示黄色
假如密码为三种的组合：由数字、字母和符号，密码为高，显示绿色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .state0{
            height:10px ;
            width: 100px;
            border: 1px dotted black;
        }
        .state1{
            height:10px ;
            width: 50px;
            background-color: red;
        }
        .state2{
            height:10px ;
            width: 80px;
            background-color: yellow;
        }
        .state3{
            height:10px ;
            width: 120px;
            background-color: green;
        }
    </style>
</head>
<body>

<label>请输入密码：<input type="text"/><br /></label>
密码验证：<div class="state0"></div>
</body>
<script>
    //密码长度为6~15，只有一种为1，两种为2，三种为3:字母，数字，特殊符号
    var pwd=document.getElementsByTagName("input");
    var stat=document.getElementsByTagName("div");
    pwd[0].onkeyup=function () {
        stat[0].className="state"+ ((this.value.length>=6&&this.value.length<=15)? getLvl(this.value):0);

    };
    function getLvl(pwd) {
        var lvl=0;
        if(/\d/.test(pwd)){
            lvl++;
        }
        if (/[a-zA-Z]/.test(pwd)){
            lvl++;
        }
        if (/\W|[_]/.test(pwd)){
            lvl++;
        }
        return lvl;
    }
</script>
</html>

在这里插入图片描述

LullabyLY

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
验证密码的强中弱程度——正则表达式

最近在做一个项目，里面包含了注册页面，正好学习了正则表达式，就练习练习。验证密码的强中弱程度：密码可以是数字、字母、特殊符号加_（在正则表达式中，_不算特殊符号）假如密码只有一种：只有数字、只有字母、或者只有符号，密码为弱，显示红色假如密码由两种组合：由数字和字母、由数字和符号，或者字母和符合，密码为中，显示黄色假如密码为三种的组合：由数字、字母和符号，密码为高，显示绿色<!...
复制链接

扫一扫