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的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
基于jQuery架构javascript基础体系
Jan 01 Javascript
node.js中的fs.readSync方法使用说明
Dec 17 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 Javascript
JavaScript基础之AJAX简单的小demo
Jan 29 Javascript
vue2中的keep-alive使用总结及注意事项
Dec 21 Javascript
JavaScript实现获取select下拉框中第一个值的方法
Feb 06 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
Apr 19 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
vue与django集成打包的实现方法
Nov 11 Javascript
js实现从右往左匀速显示图片(无缝轮播)
Jun 29 Javascript
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
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
codeigniter实现get分页的方法
2015/07/10 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
json-lib出现There is a cycle in the hierarchy解决办法
2010/02/24 Javascript
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
js中的preventDefault与stopPropagation详解
2014/01/29 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
2016/05/05 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
win系统下nodejs环境安装配置
2017/05/04 NodeJs
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
python求素数示例分享
2014/02/16 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
python实现发送邮件及附件功能
2021/03/02 Python
Python爬虫实战之12306抢票开源
2019/01/24 Python
对Django中的权限和分组管理实例讲解
2019/08/16 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
Python Django form 组件动态从数据库取choices数据实例
2020/05/19 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
python中类与对象之间的关系详解
2020/12/16 Python
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
Java语言程序设计测试题选择题部分
2014/04/03 面试题
20年同学聚会感言
2014/02/03 职场文书
求职者怎样写自荐信
2014/04/13 职场文书
工作收入证明模板
2014/10/10 职场文书