JavaScript正则验证密码强弱度的实现方法
展示
设计
密码强弱度分析
密码由数字,字母,特殊符号组成
- 密码: 只有数字- 或者是只有字母,或者是只有特殊符号——1级：弱
- 两两组合: 数字和字母, 数字和特殊符号, 字母和特殊符号——2级：中
- 三者都有: 数字和字母和特殊符号——3级：强
代码
版本一：基本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
#dv{
width: 300px;
height:200px;
position: absolute;
left:100px;
top:100px;
}
.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 id="dv">
<label for="password">密码</label>
<input type="text" id="password" maxlength="16">
<div>
<b>密码强度：</b>
<em id="strength"></em>
<div id="strengthLevel" class="strengthLv0"></div>
</div>
</div>
<script>
function my$(id) {
return document.getElementById(id);
}
<script>
//获取文本框注册键盘抬起事件
my$("password").onkeyup=function () {
//每次键盘抬起都要获取文本框中的内容,验证文本框中有什么东西,得到一个级别,然后下面的div显示对应的颜色
//如果密码的长度是小于6的,没有必要判断
if(this.value.length>=6){
var lvl=getLvl(this.value);
if(lvl==1){
//弱
my$("strengthLevel").className="strengthLv1";
}else if(lvl==2){
my$("strengthLevel").className="strengthLv2";
}else if(lvl==3){
my$("strengthLevel").className="strengthLv3";
}else{
my$("strengthLevel").className="strengthLv0";
}
}else{
my$("strengthLevel").className="strengthLv0";
}
};
//给我密码,我返回对应的级别
function getLvl(password) {
var lvl=0;//默认是0级
//密码中是否有数字,或者是字母,或者是特殊符号
if(/[0-9]/.test(password)){
lvl++;
}
//判断密码中有没有字母
if(/[a-zA-Z]/.test(password)){
lvl++;
}
//判断密码中有没有特殊符号
if(/[^0-9a-zA-Z_]/.test(password)){
lvl++;
}
return lvl;//1 3
}
</script>
</body>
</html>
上面代码有点冗余，我们对其进行升级改写
版本二：升级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
#dv{
width: 300px;
height:200px;
position: absolute;
left:100px;
top:100px;
}
.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 id="dv">
<label for="password">密码</label>
<input type="text" id="password" maxlength="16"><!--课外话题-->
<div>
<b>密码强度：</b>
<em id="strength"></em>
<div id="strengthLevel" class="strengthLv0"></div>
</div>
</div>
<!-- <script src="common.js"></script> -->
<script>
function my$(id) {
return document.getElementById(id);
}
//获取文本框注册键盘抬起事件
my$("password").onkeyup=function () {
//每次键盘抬起都要获取文本框中的内容,验证文本框中有什么东西,得到一个级别,然后下面的div显示对应的颜色
my$("strengthLevel").className="strengthLv"+(this.value.length>=6?getLvl(this.value) :0);
};
//给我密码,我返回对应的级别
function getLvl(password) {
var lvl=0;//默认是0级
//密码中是否有数字,或者是字母,或者是特殊符号
if(/[0-9]/.test(password)){
lvl++;
}
//判断密码中有没有字母
if(/[a-zA-Z]/.test(password)){
lvl++;
}
//判断密码中有没有特殊符号
if(/[^0-9a-zA-Z_]/.test(password)){
lvl++;
}
return lvl;//最小的值是1,最大值是3
}
</script>
</body>
</html>
到此这篇关于JavaScript正则验证密码强弱度的实现方法的文章就介绍到这了,更多相关JavaScript正则密码强弱度内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
javascript 密码强弱度检测万能插件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"&g
-
JavaScript正则验证密码强弱度的实现方法
展示 设计 密码强弱度分析 密码由数字,字母,特殊符号组成 密码: 只有数字- 或者是只有字母,或者是只有特殊符号--1级:弱 两两组合: 数字和字母, 数字和特殊符号, 字母和特殊符号--2级:中 三者都有: 数字和字母和特殊符号--3级:强 代码 版本一:基本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Do
-
php使用正则验证密码字段的复杂强度 原创
目录 一. php密码复杂示例 二. 高级版简单写法 三. 总结 密码涉及到安全问题,简单的密码很容易被暴力破解,所以密码设计的复杂程序尤为重要.通常情况下密码由大小写字母.数字.特殊符号组成.比如前端需要用户设置密码时,可以使用javascript进行正则判断,密码不符合要求时弹窗或输出提示,那就不要使用php等后端语言了?不使用后端语言是不安全的,因为其他人可以直接使用postman等自定义参数提交你的URL接口.一般情况下前端可不做js判断,使用ajax提交php后端程序接口,由后端判断后
-
JavaScript动态检测密码强度原理及实现方法详解
本文实例讲述了JavaScript动态检测密码强度原理及实现方法.分享给大家供大家参考,具体如下: 在注册账户,设置密码时,会出现密码强度动态检测,网上看了一些帖子,大多只写了具体的实现过程,而没有对原理的分析过程.下面着重讲一下其原理. 原理分析 通常实现密码强度动态判断有两种方案实现: 正则.但其效率低一点,难度也大一些. 字符串,函数和运算符. 这里用第二种方案,但是如何判断一个密码串是强还是弱呢? 一般我们的密码会设置为数字.字母(大小写).特殊符号三类. 强:密码串包含其中三种或以上
-
正则验证不能含有中文的实现方法【jQuery与java实现】
本文实例讲述了正则验证不能含有中文的实现方法.分享给大家供大家参考,具体如下: jQuery利用正则验证不能含有中文 var myReg = /^[a-zA-Z0-9_]{0,}$/; if (!myReg.test(input.val())) { $.validation.tip(false, input, "用户名不能含有中文或特殊字符"); return; } Java验证字符串没有中文 if (nickname.getBytes().length != nickname.len
-
Javascript使用正则验证身份证号(简单)
身份证为15位或者18位,15位的全为数字,18位的前17位为数字,最后一位为数字或者大写字母"X". 与之匹配的正则表达式: (^\d{15}$)|(^\d{17}([0-9]|X)$) 下面以Javascript为例进行说明: functionisIdCardNo(num) { num = num.toUpperCase(); //身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符X. if ( !(/(^\d{15}$)|(^
-
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
本文实例总结了JavaScript常用正则验证函数.分享给大家供大家参考,具体如下: 1.验证年龄格式(年龄只能0~99,两位数) //验证年龄格式(年龄只能0~99,两位数) function ValidateUserAge(age) { var regNum = /^[0-9]{1,2}$/; if (regNum.test(age)) { return true; } else { alert("请输入正确的年龄!") return false; } } 2.控制文本框只能输入数
-
javascript正则表达配置扩展名并实现验证
项目需求: 1.通过下拉菜单,可配置包含或者不包含某个字符串的文件名,字符串支持输入:必须以.xml为结尾 2.可动态添加.删除配置行: 3.点击[开始生成]按钮,根据配置的扩展名生成相应正则表达式: 4.输入需要测试的文件名,进行正则验证: 5.点击[确定]按钮,将配置的正则表达式提交至后台: 如下图: 最初需求还有一个“并且/或者”的下拉菜单选项,其中“或者”不好实现,和产品沟通后只保留了“并且”,有思路的朋友欢迎留言,一起探讨. 实现思路: 1.首先实现配置内容,点击[增加]按钮添加一行表
-
javascript手机验证、邮箱验证、密码验证的正则表达式简单封装实例
javascript[手机验证].[邮箱验证].[密码验证]的正则表达式的封装: [手机验证]: 以下代码是验证手机号码的正则表达式的方法, [checkPhone]:表示的是方法的名称: [phoneId]:表示方法的参数,这里为获取手机号码的html元素的id,一般为input元素的id: [$(phoneId).val()]:JQ通过id获取input的值: [手机匹配的正则表达式]: /^1[2|3|4|5|6|7|8|9|]\d{9}$/ /*手机验证*/ function check
-
原生js实现表单的正则验证（验证通过后才可提交）
实现了如下功能: 1.用户名:onfouc显示msg规则:onkeyup计算字符,其中中文为两个字符:onblur,验证是否通过 2.邮箱:onblur 正则匹配,正则是根据自己的需求写的,可以根据个人需求更改 3..密码:onkeyup时显示密码的强弱度,onblur时验证密码,是否为相同字符,是否全字符,或全数字,长度是否符合要求 4.确认密码:验证是否和上一次一致 5.提交按钮只有在全部input验证通过后才有效,否则无效 主要知识点: 1.中文为两个字符: function getLen