js 验证密码强弱的小例子


Posted in Javascript onMarch 21, 2013

页面代码:

<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>
Javascript 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Dec 21 Javascript
用js读、写、删除Cookie代码续篇
Dec 03 Javascript
js函数与php函数的区别实例浅析
Jan 12 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
jQuery CSS3相结合实现时钟插件
Jan 08 Javascript
AngularJS 视图详解及示例代码
Aug 17 Javascript
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
JavaScript实现随机五位数验证码
Sep 27 Javascript
vue  elementUI 表单嵌套验证的实例代码
Nov 06 Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 Javascript
js校验开始时间和结束时间
May 26 Javascript
微信小程序反编译的实现
Dec 10 Javascript
javascript中日期转换成时间戳的小例子
Mar 21 #Javascript
Javascript算符的优先级介绍
Mar 20 #Javascript
jQuery.validate 常用方法及需要注意的问题
Mar 20 #Javascript
如何用js控制frame的隐藏或显示的解决办法
Mar 20 #Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
Mar 20 #Javascript
jQuery对象和Javascript对象之间转换的实例代码
Mar 20 #Javascript
jquery的ajax请求全面了解
Mar 20 #Javascript
You might like
PHP时间函数使用详解
2019/03/21 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
几行代码轻松搞定jquery实现flash8类似的连接效果
2007/05/03 Javascript
jQuery load方法用法集锦
2011/12/06 Javascript
Jquery AJAX POST与GET之间的区别
2013/11/14 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
jquery实现顶部向右伸缩的导航区域代码
2015/09/02 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
2016/10/09 Javascript
bootstarp modal框居中显示的实现代码
2017/02/18 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
nodejs+mongodb+vue前后台配置ueditor的示例代码
2018/01/02 NodeJs
python脚本替换指定行实现步骤
2017/07/11 Python
python添加模块搜索路径方法
2017/09/11 Python
Python cookbook(数据结构与算法)从字典中提取子集的方法示例
2018/03/22 Python
Python使用字典的嵌套功能详解
2019/02/27 Python
Python return语句如何实现结果返回调用
2020/10/15 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
Python3读写ini配置文件的示例
2020/11/06 Python
python openpyxl模块的使用详解
2021/02/25 Python
韩国三大免税店之一:THE GRAND 中文免税店
2016/07/21 全球购物
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
怎么写好自荐信
2013/10/30 职场文书
新年晚会主持词
2014/03/24 职场文书
英语系毕业生求职信
2014/07/13 职场文书
2014年药店工作总结
2014/11/20 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
管理失职检讨书范文
2015/05/05 职场文书
2015年测量员工作总结
2015/05/23 职场文书
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS
MySQL创建管理KEY分区
2022/04/13 MySQL
USB TYPE-C 或将成为所有智能手机充电标准
2022/04/21 数码科技
python中的random模块和相关函数详解
2022/04/22 Python