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 相关文章推荐
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
javascript实现获取cookie过期时间的变通方法
Aug 14 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 Javascript
详解堆的javascript实现方法
Nov 29 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 Javascript
Vue 递归多级菜单的实例代码
May 05 Javascript
ant-design-vue按需加载的坑的解决
May 14 Javascript
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
Vue2.0 $set()的正确使用详解
Jul 28 Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 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常用代码
2006/11/23 PHP
php+mysqli实现批量执行插入、更新及删除数据的方法
2015/01/29 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
Yii2中添加全局函数的方法分析
2017/05/04 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
js function定义函数使用心得
2010/04/15 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
vue-dialog的弹出层组件
2020/05/25 Javascript
element-ui表格列金额显示两位小数的方法
2018/08/24 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
JavaScript实现打砖块游戏
2020/02/25 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
Python脚本实现格式化css文件
2015/04/08 Python
python PyTorch参数初始化和Finetune
2018/02/11 Python
TensorFlow损失函数专题详解
2018/04/26 Python
python cumsum函数的具体使用
2019/07/29 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
2020/08/18 HTML / CSS
房地产广告词大全
2014/03/19 职场文书
计算机毕业大学生求职信
2014/06/26 职场文书
建筑安全责任书范本
2014/07/24 职场文书
六一儿童节开幕词
2015/01/29 职场文书
2015年清明节演讲稿范文
2015/03/17 职场文书
社区党支部承诺书
2015/04/29 职场文书
SQL实现LeetCode(180.连续的数字)
2021/08/04 MySQL