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 相关文章推荐
载入进度条 效果
Jul 08 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
JavaScript数组前面插入元素的方法
Apr 06 Javascript
JS判断字符串包含的方法
May 05 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
Oct 25 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
May 22 Javascript
package.json配置文件构成详解
Aug 27 Javascript
vue 开发企业微信整合案例分析
Dec 02 Javascript
js代码编写无缝轮播图
Sep 13 Javascript
JavaScript严格模式不支持八进制的问题讲解
Nov 07 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系统流量分析的程序
2006/10/09 PHP
一个显示效果非常不错的PHP错误、异常处理类
2014/03/21 PHP
php中获取主机名、协议及IP地址的方法
2014/11/18 PHP
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
PHP+Ajax 检测网络是否正常实例详解
2016/12/16 PHP
PHP数组array类常见操作示例
2020/05/15 PHP
js字符编码函数区别分析
2011/12/28 Javascript
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
一些老手都不一定知道的JavaScript技巧
2014/05/06 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
2016/04/13 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
ES7之Async/await的使用详解
2019/03/28 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
python二分法实现实例
2013/11/21 Python
Python实现的生成自我描述脚本分享(很有意思的程序)
2014/07/18 Python
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
python批量修改文件夹及其子文件夹下的文件内容
2019/03/15 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
Python 通过监听端口实现唯一脚本运行方式
2020/05/05 Python
python和php哪个更适合写爬虫
2020/06/22 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
加拿大约会网站:EliteSingles.ca
2018/01/12 全球购物
关于打架的检讨书
2014/01/17 职场文书
企业安全生产标语
2014/06/06 职场文书
八年级作文之我的母亲
2019/12/10 职场文书
Python time库的时间时钟处理
2021/05/02 Python
配置Kubernetes外网访问集群
2022/03/31 Servers