JS基于正则表达式实现的密码强度验证功能示例
时间:2019-04-07
本文章向大家介绍JS基于正则表达式实现的密码强度验证功能示例,主要包括JS基于正则表达式实现的密码强度验证功能示例使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例讲述了JS基于正则表达式实现的密码强度验证功能。分享给大家供大家参考,具体如下:
先来看看运行效果:
具体代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 脚本之家</title> </head> <style type="text/css"> body { background: #ccc; } label { width: 40px; display: inline-block; } span { color: red; } .container { margin: 100px auto; width: 400px; padding: 50px; line-height: 40px; border: 1px solid #999; background: #efefef; } span { margin-left: 30px; font-size: 12px; } .wrong { color: red } .right { color: green; } .strengthLv0 { height: 6px; width: 120px; border: 1px solid #ccc; padding: 2px; } .strengthLv1 { background: red; height: 6px; width: 40px; border: 1px solid #ccc; padding: 2px; } .strengthLv2 { background: orange; height: 6px; width: 80px; border: 1px solid #ccc; padding: 2px; } .strengthLv3 { background: green; height: 6px; width: 120px; border: 1px solid #ccc; padding: 2px; } </style> <body> <div class="container"> <label>密码</label> <input type="text" id="inp1" maxlength="16"> <!--<input type="password" id="inp1" maxlength="16"/>--> <div class="pass-wrap"> <em>密码强度:</em> <em id="strength"></em> <div id="strengthLevel" class="strengthLv0"></div> </div> </div> <script> var regEx = /^[1-9]\d{4,9}$/; //匹配qq号 //找人 var inp1 = document.getElementById("inp1"); var strength = document.getElementById("strength"); var strengthLevel = document.getElementById("strengthLevel"); var arr = ["", "低", "中", "高"]; inp1.onkeyup = function () { var level = 0; if (/[1-9]/.test(this.value)) { level++; } if (/[a-z]/.test(this.value)) { level++; } if (/[^a-z1-9]/.test(this.value)) { level++ } if (this.value.length < 6) { level = 0; } strength.innerHTML = arr[level]; strengthLevel.className = "strengthLv" + level; }; /* inp1.onkeyup = function () { var level = 0; if (/[1-9]/.test(this.value)) { level++; } if (/[a-z]/.test(this.value)) { level++ } if (/[^a-z0-9]/.test(this.value)) { level++ } if (inp1.value.length < 6) { level = 0; } strengthLevel.className = "strengthLv"+level; strength.innerHTML = arr[level]; };*/ </script> </body> </html>
PS:这里再为大家提供几款相关在线工具供大家参考使用:
密码安全性在线检测:
http://tools.jb51.net/password/my_password_safe
在线随机数字/字符串生成工具:
http://tools.jb51.net/aideddesign/suijishu
高强度密码生成器:
http://tools.jb51.net/password/CreateStrongPassword
JavaScript正则表达式在线测试工具:
http://tools.jb51.net/regex/javascript
正则表达式在线生成工具:
http://tools.jb51.net/regex/create_reg
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript正则表达式技巧大全》、《JavaScript替换操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
- Android系统更改状态栏字体颜色
- Android实现竖着的滑动刻度尺效果,选择身高(竖向的)
- DedeCMS全版本通杀SQL注入漏洞利用代码及工具
- Android实现滑动刻度尺效果,选择身高体重和生日
- 浅谈开源web程序后台的安全性
- Web漏洞演练平台 – ZVulDrill
- Android内存泄漏终极解决篇(上)
- 走近科学:我是如何入侵Instagram查看你的私人片片的
- 在线手写识别的多卷积神经网络方法
- 苹果发布OS X 10.9.2更新,修复SSL漏洞
- Android内存泄漏终极解决篇(下)
- 利用Volatility查找系统中的恶意DLL
- 雪人行动:利用IE10 0day漏洞的APT攻击剑指美国军方情报
- Android开发:最详细的 Toolbar 开发实践总结
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python 环境重启方法,系统环境变量配置后python生效设置方法
- 快速上手 WebAssembly 应用开发:Emscripten 使用入门
- Python爬虫之mongodb的索引操作
- (六)日志生成
- Python爬虫之mongodb的权限管理
- Python爬虫之mongodb和python交互
- 转录组分析 | 使用RSeQC软件对生成的BAM文件进行质控
- 转录组分析 | 使用Stringtie对数据进行下游处理
- 存在重复元素
- CentOS7下LNMP环境搭建Discuz论坛
- 【小项目】使用shell和expect实现简易的文件分发系统
- expect快速入门
- 【小项目】:使用shell编写一个简单的告警系统
- JSP介绍与简单使用
- shell中的函数和数组