学习js高级第五天

今天学习正则表达式

身份证的表达式 18位
[1-9][0-9]{16}|[0-9X]
座机号的表达式
0716-1234567
0716-12345678
027-1234567
[0][1-9]{2,3}[-][0-9]{7,8}
QQ号的正则表达式 5位-10位
[1-9][0-9]{4-9}
手机号码的正则表达式
130-139
150-159
170 171 173 177
180-189
([1][358][0-9]{9})|([1][7][0137][0-9]{8})
邮箱的正则表达式
[0-9a-z]+[@][0-9a-z]+([.][cn][one][mt]?){1,2}

密码强度:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    #dv {
        width: 300px;
        height: 200px;
        position: absolute;
        left: 300px;
        top: 100px;
    }

    .strengthLv0 {
        height: 6px;
        width: 120px;
        border: 1px solid #ccc;
        padding: 2px;
    }

    .strengthLv1 {
        background: red;
        height: 6px;
        width: 40px;
        border: 1px solid #ccc;
        padding: 2px;
    }

    .strengthLv2 {
        background: orange;
        height: 6px;
        width: 80px;
        border: 1px solid #ccc;
        padding: 2px;
    }

    .strengthLv3 {
        background: green;
        height: 6px;
        width: 120px;
        border: 1px solid #ccc;
        padding: 2px;
    }
</style>
<body>
<div id="dv">
    <label for="pwd">密码</label>
    <input type="text" id="pwd" maxlength="16" minlength="6">
    <div>
        <em>密码强度:</em>
        <em id="strength"></em>
        <div id="strengthLevel" class="strengthLv0"></div>
    </div>
</div>
<script>

    //给我密码,返回对应的级别
    function getPass(pwd) {
        var pass = 0;
        if (/[0-9]/.test(pwd)) {
            pass++;
        }
        if (/[a-zA-Z]/.test(pwd)) {
            pass++
        }
        if (/[\W]/.test(pwd)) {
            pass++;
        }
        return pass;
    }

    var pw = document.getElementById("pwd")
    var qd = document.getElementById("strengthLevel");
    pw.onkeyup = function () {
        if (this.value.length >= 6) {
            var lv = getPass(this.value);
            console.log(lv);
            qd.className = "strengthLv" + lv;

        } else {
            qd.className = "strengthLv0"
        }
    }

</script>

</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值