用正则+JS实现密码等级验证提示案例

作者: JONE 分类: PHPer 发布时间: 2017-09-09 18:07
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>密码等级</title>
    <script>
        window.onload = function () {
            var psw = document.getElementById('password');
            var span = document.getElementById('span');
            psw.onkeyup = function () {
                //console.log(this.value);
                var val = this.value;
                var lv = 0;
                if(/[a-z]/g.test(val)){
                    lv++;
                }
                if(/[A-Z]/g.test(val)){
                    lv++;
                }
                if(/[0-9]/g.test(val)){
                    lv++;
                }
                if(/[^0-9a-zA-Z]/g.test(val)){
                    lv++;
                }
                //console.log(lv);
                if(lv == 1){
                    span.innerHTML = '低';
                    span.style.color = 'red';
                }else if(lv == 2){
                    span.innerHTML = '中';
                    span.style.color = 'orange';
                }else if(lv >= 3){
                    span.innerHTML = '高';
                    span.style.color = 'green';
                }
            }
        }
    </script>
</head>
<body>
    <input type="text" id="password">
    <span id="span"></span>
</body>
</html>
正则