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利用与或运算符优先级实现if else条件判断表达式
Apr 15 Javascript
IE下JS读取xml文件示例代码
Aug 05 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
React-Router如何进行页面权限管理的方法
Dec 06 Javascript
js实现手机web图片左右滑动效果
Dec 29 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
webpack 最佳配置指北(推荐)
Jan 07 Javascript
vue在线动态切换主题色方案
Mar 26 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
第1次亲密接触PHP5(2)
2006/10/09 PHP
php MessagePack介绍
2013/10/06 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
PHP中让json_encode不自动转义斜杠“/”的方法
2017/02/28 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
2007/02/23 Javascript
总结AJAX相关JS代码片段和浏览器模型
2007/08/15 Javascript
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
2014/03/18 NodeJs
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
js实现索引图片切换效果
2015/11/21 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
2018/02/26 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
Python 内置函数complex详解
2016/10/23 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
美国家具网站:Cymax
2016/09/17 全球购物
JNI的定义
2012/11/25 面试题
银行财务部实习生的自我鉴定
2013/11/27 职场文书
期末考试动员演讲稿
2014/01/10 职场文书
技能比赛获奖感言
2014/02/14 职场文书
班级团队活动方案
2014/08/14 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
工作建议书范文
2019/07/08 职场文书