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 相关文章推荐
两个SUBMIT按钮,如何区分处理
Aug 22 Javascript
js脚本学习 比较实用的基础
Sep 07 Javascript
javascript下有关dom以及xml节点访问兼容问题
Nov 26 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
利用jQuery实现可输入搜索文字的下拉框
Oct 23 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
详解适配器在JavaScript中的体现
Sep 28 Javascript
vue-cli3跨域配置的简单方法
Sep 06 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基础学习笔记
2007/03/18 PHP
PHP系列学习之日期函数使用介绍
2012/08/18 PHP
PHP使用GETDATE获取当前日期时间作为一个关联数组的方法
2015/03/19 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
如何用javascript去掉字符串里的所有空格
2007/02/08 Javascript
使用js获取QueryString的方法小结
2010/02/28 Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
jQuery中:checkbox选择器用法实例
2015/01/03 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
2016/02/14 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
2016/09/13 Javascript
Angular4如何自定义首屏的加载动画详解
2017/07/26 Javascript
js操作二进制数据方法
2018/03/03 Javascript
微信小程序合法域名配置方法
2019/05/06 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
Js数组扁平化实现方法代码总汇
2020/11/11 Javascript
八大排序算法的Python实现
2021/01/28 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
python selenium xpath定位操作
2020/09/01 Python
美国电视购物HSN官网:HSN
2016/09/07 全球购物
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
自我评价个人范文
2013/12/16 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
水毁工程实施方案
2014/04/01 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
小学教师个人总结
2015/02/05 职场文书
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB