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 学习 - 提高篇
Feb 02 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
May 10 Javascript
jQuery jcrop插件截图使用方法
Nov 20 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
jquery 插件实现多行文本框[textarea]自动高度
Mar 04 Javascript
jQuery实现的五子棋游戏实例
Jun 13 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
Nov 09 Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
Aug 15 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
Javascript地址引用代码实例解析
Feb 25 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 在字符串指定位置插入新字符的简单实现
2016/06/28 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
PHP会话控制实例分析
2016/12/24 PHP
php通过各种函数判断0和空
2020/07/04 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
表单序列化与jq中的serialize使用示例
2014/02/21 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
2015/09/01 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
2016/10/19 Javascript
ionic实现下拉刷新载入数据功能
2017/05/11 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
Node.js npm命令运行node.js脚本的方法
2018/10/10 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
如何使用JS console.log()技巧提高工作效率
2020/10/14 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
CentOS中使用virtualenv搭建python3环境
2015/06/08 Python
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
python微元法计算函数曲线长度的方法
2018/11/08 Python
学习python需要有编程基础吗
2020/06/02 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
中软国际Java程序员笔试题
2014/07/19 面试题
新学期家长寄语
2014/01/19 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
爱国主义教育活动总结
2014/05/07 职场文书
党员争先创优承诺书
2015/01/20 职场文书
2015最新民情日记范文
2015/06/26 职场文书