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 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
node.js中watch机制详解
Nov 17 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
jQuery中Nicescroll滚动条插件的用法
Nov 10 Javascript
jQuery纵向导航菜单效果实现方法
Dec 19 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
Dec 25 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
bootstrap的工具提示实例代码
May 17 Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 Javascript
TypeScript 内置高级类型编程示例
Sep 23 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 xml-rpc远程调用
2008/12/19 PHP
php中实现可以返回多个值的函数实例
2015/03/21 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
Js组件的一些写法
2010/09/10 Javascript
jQuery ready函数滥用分析
2011/02/16 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
2013/03/15 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
JQuery球队选择实例
2015/05/18 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
python实现贪吃蛇小游戏
2020/03/21 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
python名片管理系统开发
2020/06/18 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
分享8款纯CSS3实现的搜索框功能
2017/09/14 HTML / CSS
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
集团公司总经理岗位职责
2013/12/20 职场文书
总经理检讨书
2014/09/15 职场文书
关于运动会广播稿200字
2014/10/08 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang
Oracle11g R2 安装教程完整版
2021/06/04 Oracle
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫