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 相关文章推荐
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
Apr 21 Javascript
javascript代码编写需要注意的7个小细节小结
Sep 21 Javascript
js数组如何添加json数据及js数组与json的区别
Oct 27 Javascript
跟我学习javascript的浮点数精度
Nov 16 Javascript
深入理解JS继承和原型链的问题
Dec 17 Javascript
jQuery.Form上传文件操作
Feb 05 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
Mar 01 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 Javascript
基于vue cli重构多页面脚手架过程详解
Jan 23 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 Javascript
uni-app 组件里面获取元素宽高的实现
Dec 27 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
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
JS去除iframe滚动条的方法
2015/04/01 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
jQuery插件boxScroll实现图片轮播特效
2015/07/14 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
2020/01/05 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
js canvas实现五子棋小游戏
2021/01/22 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
django 解决manage.py migrate无效的问题
2018/05/27 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
对Django中内置的User模型实例详解
2019/08/16 Python
扩展Django admin的list_filter()可使用范围方法
2019/08/21 Python
python输出数学符号实例
2020/05/11 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
python 实现端口扫描工具
2020/12/18 Python
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
婚礼主持词
2014/03/13 职场文书
公司开业庆典主持词
2014/03/21 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
作文评语集锦
2014/12/25 职场文书
大学生英文求职信范文
2015/03/19 职场文书
忠诚教育学习心得体会
2016/01/23 职场文书
Java使用Unsafe类的示例详解
2021/09/25 Java/Android
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server