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中自定义对象的属性方法分享
Jul 12 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
Jan 10 Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
Jan 23 Javascript
jQuery中的ready函数与window.onload谁先执行
Jun 21 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 Javascript
js 动态生成html 触发事件传参字符转义的实例
Feb 14 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
原生JavaScript实现换肤
Feb 19 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
无线电广播的开始
2002/01/30 无线电
分享PHP header函数使用教程
2013/09/05 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
tagName的使用,留一笔
2006/06/26 Javascript
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
ES6中Array.find()和findIndex()函数的用法详解
2017/09/16 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
python入门前的第一课 python怎样入门
2018/03/06 Python
python 识别图片中的文字信息方法
2018/05/10 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
详解python多线程之间的同步(一)
2019/04/03 Python
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
输入N,打印N*N矩阵
2012/02/20 面试题
JAVA高级程序员面试题
2013/09/06 面试题
行政专员岗位职责
2014/01/02 职场文书
信息科学与技术专业求职信范文
2014/02/20 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
春游踏青活动方案
2014/08/14 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书
新闻稿怎么写
2015/07/18 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
python 制作一个gui界面的翻译工具
2021/05/14 Python
element多个表单校验的实现
2021/05/27 Javascript
vue+element ui实现锚点定位
2021/06/29 Vue.js