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 options属性集合操作代码
Dec 28 Javascript
jqgrid 简单学习笔记
May 03 Javascript
JS 修改URL参数(实现代码)
Jul 08 Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
jquery选择器简述
Aug 31 Javascript
JS DOM实现鼠标滑动图片效果
Sep 17 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
浅谈vue首屏加载优化
Jun 28 Javascript
深入理解react 组件类型及使用场景
Mar 07 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 Javascript
JavaScript异步操作的几种常见处理方法实例总结
May 11 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 strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
PHP attributes()函数讲解
2019/02/03 PHP
Dom在ajax技术中的作用说明
2010/10/25 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
2014/04/02 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
jquery获取节点名称
2015/04/26 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
2016/03/30 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
js封装成插件的步骤方法
2017/09/11 Javascript
完美解决iview 的select下拉框选项错位的问题
2018/03/02 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31
2020/11/02 DOTA
简单了解Python中的几种函数
2017/11/03 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
python下对hsv颜色空间进行量化操作
2020/06/04 Python
python能做哪方面的工作
2020/06/15 Python
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
Nike香港官网:Nike HK
2019/03/23 全球购物
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
俄罗斯园林植物网上商店:Garshinka
2020/07/16 全球购物
人力资源管理专业自荐书
2014/07/07 职场文书
人身损害赔偿协议书格式
2014/11/01 职场文书
2014年学校总务处工作总结
2014/12/08 职场文书
付款证明格式范文
2015/06/19 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书
Python内置数据类型中的集合详解
2022/03/18 Python