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动态的改变IFrame的高度实现自动伸展
Oct 12 Javascript
Javascript进制转换实例分析
May 14 Javascript
javascript解析xml实现省市县三级联动的方法
Jul 25 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 Javascript
SVG描边动画
Feb 23 Javascript
浅谈Node异步编程的机制
Oct 18 Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 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打造属于自己的MVC框架
2012/03/07 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
js trim函数 去空格函数与正则集锦
2009/11/20 Javascript
js中匿名函数的N种写法
2010/09/08 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
基于Vue2的移动端开发环境搭建详解
2016/11/03 Javascript
BootStrap Fileinput的使用教程
2016/12/30 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
2018/08/28 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
javascript的this关键字详解
2019/05/20 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
利用pyinstaller或virtualenv将python程序打包详解
2017/03/22 Python
Python实现按特定格式对文件进行读写的方法示例
2017/11/30 Python
Python下调用Linux的Shell命令的方法
2018/06/12 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
python自定义线程池控制线程数量的示例
2019/02/22 Python
python 实现aes256加密
2020/11/27 Python
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
学期评语大全
2014/04/30 职场文书
财务会计专业求职信
2014/06/09 职场文书
公务员政审个人总结
2015/02/12 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书
话题作文之学会尊重
2019/12/16 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
python中if和elif的区别介绍
2021/11/07 Python