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 相关文章推荐
Prototype中dom对象方法汇总
Sep 17 Javascript
js 设置选中行的样式的实现代码
May 24 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 Javascript
jquery ajax跨域解决方法(json方式)
Feb 04 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
Mar 02 Javascript
jquery判断当前浏览器的实现代码
Nov 07 Javascript
用原生js做单页应用
Jan 17 Javascript
JavaScript实现鼠标点击导航栏变色特效
Feb 08 Javascript
Angular.js自动化测试之protractor详解
Jul 07 Javascript
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
npm 更改默认全局路径以及国内镜像的方法
May 16 Javascript
js中时间格式化的几种方法
Jul 22 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
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
JS作用域深度解析
2016/12/29 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
Vue底层实现原理总结
2018/02/17 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
在layui框架中select下拉框监听更改事件的例子
2019/09/20 Javascript
es6数组的flat(),flatMap()函数用法实例分析
2020/04/18 Javascript
[41:37]DOTA2北京网鱼队选拔赛——冲击职业之路
2015/04/13 DOTA
Flask框架各种常见装饰器示例
2018/07/17 Python
python代码过长的换行方法
2018/07/19 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
pandas 对group进行聚合的例子
2019/12/27 Python
python实现电子词典
2020/03/03 Python
Hotels.com越南:酒店预订
2019/10/29 全球购物
英国买鞋网站:Charles Clinkard
2019/11/14 全球购物
莫斯科的韩国化妆品店:Sifo
2019/12/04 全球购物
Shell编程面试题
2012/05/30 面试题
高中生学习生活的自我评价
2013/10/09 职场文书
中专毕业生的自我鉴定
2013/12/01 职场文书
图书馆标语
2014/06/19 职场文书
政协工作总结2015
2015/05/20 职场文书
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL