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常用函数(2)
Nov 05 Javascript
javascript中sort排序实例详解
Jul 24 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
js插件Jcrop自定义截取图片功能
Oct 14 Javascript
jQuery的Read()方法代替原生JS详解
Nov 08 Javascript
基于vue-resource jsonp跨域问题的解决方法
Feb 03 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 Javascript
ng-zorro-antd 入门初体验
Dec 03 Javascript
深入理解react 组件类型及使用场景
Mar 07 Javascript
js实现拖动缓动效果
Jan 13 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 Javascript
vue中echarts引入中国地图的案例
Jul 28 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模板类代码
2008/09/07 PHP
PHP5 的对象赋值机制介绍
2011/08/02 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
Yii2针对指定url的生成及图片等的引入方法小结
2016/07/18 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
namespace.js Javascript的命名空间库
2011/10/11 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
[01:14]英雄,所敬略同——2018完美盛典宣传视频
2018/12/05 DOTA
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
老生常谈python的私有公有属性(必看篇)
2017/06/09 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
CSS3新增布局之: flex详解
2020/06/18 HTML / CSS
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
微软中国官方旗舰店:销售Surface、Xbox One、笔记本电脑、Office
2018/07/23 全球购物
美国中西部家用医疗设备商店:Med Mart(轮椅、踏板车、升降机等)
2019/04/26 全球购物
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
违章停车检讨书
2014/10/21 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
Python面向对象编程之类的概念
2021/11/01 Python