zoukankan      html  css  js  c++  java
  • js 密码强弱的实现

    页面代码:

    <table>
            <tr><td><input type="text" id="txtPwd" /></td></tr>
            <tr><td>
                <table id="pwdLever">
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
            </td></tr>
        </table>

    样式:

    <style type="text/css">
            #pwdLever td
            {
               background-color:Gray;
               width:45px;
               text-align:center;
            }
        </style>

    js代码:

    <script type="text/javascript">
            window.onload = function () {
                var textInput = document.getElementById("txtPwd");
                //给密码输入框 注册键放开事件
                textInput.onkeyup = function () {
                    var pwdValue = this.value;
                    var num = pwdChange(pwdValue);
                    var tds = document.getElementById("pwdLever").getElementsByTagName("td");
                    //修改密码颜色
                    if (num == 0 || num == 1) {
                        tds[0].style.backgroundColor = "red";
                        tds[1].style.backgroundColor = "gray";
                        tds[2].style.backgroundColor = "gray";
                    }
                    else if (num == 2) {
                        tds[0].style.backgroundColor = "red";
                        tds[1].style.backgroundColor = "red";
                        tds[2].style.backgroundColor = "gray";
                    }
                    else if (num == 3) {
                        tds[0].style.backgroundColor = "red";
                        tds[1].style.backgroundColor = "red";
                        tds[2].style.backgroundColor = "red";
                    }
                    else {
                        tds[0].style.backgroundColor = "gray";
                        tds[1].style.backgroundColor = "gray";
                        tds[2].style.backgroundColor = "gray";
                    }
                }
            }
            function pwdChange(v) {
                var num = 0;
                var reg = /\d/; //如果有数字
                if (reg.test(v)) {
                    num++;
                }
                reg = /[a-zA-Z]/; //如果有字母
                if (reg.test(v)) {
                    num++;
                }
                reg = /[^0-9a-zA-Z]/; //如果有特殊字符
                if (reg.test(v)) {
                    num++;
                }
                if (v.length < 6) { //如果密码小于6
                    num--;
                }
                return num;
            }
        </script>
  • 相关阅读:
    base64和Blob的相互转换
    限制文件上传的大小和尺寸
    git将本地项目提交到github
    vue-cli3创建项目时报错
    运行项目是node-sass报错的解决方法
    classList的使用
    将数组扁平化并去除其中重复数据,最终得到一个升序且不重复的数组
    移动端的图片放大
    js获取url中的参数
    HTML5-canvas
  • 原文地址:https://www.cnblogs.com/nianlee/p/2972712.html
Copyright © 2011-2022 走看看