学习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>

学习js高级第五天

猜你喜欢