js正则表达式验证密码强度【推荐】


Posted in Javascript onMarch 03, 2017

效果图:

js正则表达式验证密码强度【推荐】

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>验证密码强度</title>
 <style type="text/css">
 *{margin: 0;padding: 0;}
 body{background:#ccc;}
 #demo{width:400px;padding:50px;background:#efefef;border: 1px solid #999;line-height:40px;margin:100px auto 0;}
 #strength_length{height:6px;width:100px;padding:2px;border: 1px solid #ccc;}
 .lv1{background:red;}
 .lv2{background:blue;width:200px;}
 .lv3{background:green;width:300px;}
 </style>
</head>
<body>
 <div id="demo">
 <label for="ipt">密码:</label>
 <input type="text" id="ipt"><br/>
 <em>密码强度:</em><em id="strength"></em>
 <div id="strength_length"></div>
 </div>
</body>
<script type="text/javascript">
 (function(window){
 function $(id){
 return document.getElementById(id);
 };
 var arr = ["","低","中","高"];
 // 获取对象
 var ipt = $("ipt"),strength = $("strength"),strLength = $("strength_length");
 // 密码输入事件
 ipt.onkeyup = function(){
 var s = 0;
 var txt = this.value;
 if( /[a-zA-Z]/.test(txt) ){
 s++;
 };
 if( /[0-9]/.test(txt) ){
 s++;
 };
 if( /[^0-9a-zA-Z]/.test(txt) ){
 s++;
 };
 if( txt.length <6 ){
 s = 0;
 };
 strength.innerHTML = arr[s];
 strLength.className = "lv" + s;
 }
 })(window)
</script>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
在次封装easyui-Dialog插件实现代码
Nov 14 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
js中的caller和callee属性介绍和例子
Jun 07 Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 Javascript
js定时器实现倒计时效果
Nov 05 Javascript
Javacript中自定义的map.js  的方法
Nov 26 Javascript
swiper 自动图片无限轮播实现代码
May 21 Javascript
js如何找出字符串中的最长回文串
Jun 04 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
Nov 23 Javascript
JS实现网站吸顶条
Jan 08 Javascript
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 #Javascript
jQuery简单实现MD5加密的方法
Mar 03 #Javascript
详解angular2封装material2对话框组件
Mar 03 #Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 #Javascript
AngularJS表格样式简单设置方法示例
Mar 03 #Javascript
AngularJS表格添加序号的方法
Mar 03 #Javascript
JS实现双击内容变为可编辑状态
Mar 03 #Javascript
You might like
php强制文件下载而非在浏览器打开的自定义函数分享
2014/05/08 PHP
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
Referer原理与图片防盗链实现方法详解
2019/07/03 PHP
文字不间断滚动(上下左右)实例代码
2013/04/21 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
js插件dropload上拉下滑加载数据实例解析
2016/07/27 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
2018/02/23 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
nodejs文件夹深层复制功能
2019/09/03 NodeJs
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
python实现名片管理器的示例代码
2019/12/17 Python
Django 限制访问频率的思路详解
2019/12/24 Python
用python实现学生管理系统
2020/07/24 Python
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
2015/01/01 HTML / CSS
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
台湾菁英交友:结识黄金单身的台湾人
2018/01/22 全球购物
办理信用卡工作证明
2014/01/11 职场文书
硕士生找工作求职信
2014/07/05 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
售后服务质量承诺书
2015/04/29 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
python绘制云雨图raincloud plot
2022/08/05 Python