文档章节

验证密码强度JQ

写代码的熊猫
 写代码的熊猫
发布于 2016/09/08 10:42
字数 397
阅读 10
收藏 0
<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css"> 
/*密码强度*/
.pw-strength {clear: both;position: relative;top: 8px;width: 180px;}
.pw-bar{background: url(images/pwd-1.png) no-repeat;height: 14px;overflow: hidden;width: 179px;}
.pw-bar-on{background:  url(images/pwd-2.png) no-repeat; width:0px; height:14px;position: absolute;top: 1px;left: 2px;transition: width .5s ease-in;-moz-transition: width .5s ease-in;-webkit-transition: width .5s ease-in;-o-transition: width .5s ease-in;}
.pw-weak .pw-defule{ width:0px;}
.pw-weak .pw-bar-on {width: 60px;}
.pw-medium .pw-bar-on {width: 120px;}
.pw-strong .pw-bar-on {width: 179px;}
.pw-txt {padding-top: 2px;width: 180px;overflow: hidden;}
.pw-txt span {color: #707070;float: left;font-size: 12px;text-align: center;width: 58px;}</style>

<script type="text/javascript"> 
$(function(){ 
	$('#pass').keyup(function () { 
	alert($('#pass').val());
		var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g"); 
		var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g"); 
		var enoughRegex = new RegExp("(?=.{6,}).*", "g"); 
	
		if (false == enoughRegex.test($(this).val())) { 
			$('#level').removeClass('pw-weak'); 
			$('#level').removeClass('pw-medium'); 
			$('#level').removeClass('pw-strong'); 
			$('#level').addClass(' pw-defule'); 
			 //密码小于六位的时候,密码强度图片都为灰色 
		} 
		else if (strongRegex.test($(this).val())) { 
			$('#level').removeClass('pw-weak'); 
			$('#level').removeClass('pw-medium'); 
			$('#level').removeClass('pw-strong'); 
			$('#level').addClass(' pw-strong'); 
			 //密码为八位及以上并且字母数字特殊字符三项都包括,强度最强 
		} 
		else if (mediumRegex.test($(this).val())) { 
			$('#level').removeClass('pw-weak'); 
			$('#level').removeClass('pw-medium'); 
			$('#level').removeClass('pw-strong'); 
			$('#level').addClass(' pw-medium'); 
			 //密码为七位及以上并且字母、数字、特殊字符三项中有两项,强度是中等 
		} 
		else { 
			$('#level').removeClass('pw-weak'); 
			$('#level').removeClass('pw-medium'); 
			$('#level').removeClass('pw-strong'); 
			$('#level').addClass('pw-weak'); 
			 //如果密码为6为及以下,就算字母、数字、特殊字符三项都包括,强度也是弱的 
		} 
		return true; 
	}); 
}) 
</script>

</head> 
<body>

<table style="width:320px;margin:40px auto;">
	<tr>
		<th>密码</th>
		<td><span  class="tbl-txt"><input id="pass" class="input-style" size="30" maxlength="30" name="pass" type="text" /></span></td>
	</tr>
	<tr>    
		<th></th>       
		<td id="level" class="pw-strength">           	
			<div class="pw-bar"></div>
			<div class="pw-bar-on"></div>
			<div class="pw-txt">
			<span>弱</span>
			<span>中</span>
			<span>强</span>
			</div>
		</td>	
	</tr>
</table>

 

本文转载自:

写代码的熊猫
粉丝 0
博文 5
码字总数 663
作品 0
哈尔滨
私信 提问
MySQL密码强度审计插件:validate_password的使用说明

安装MySQL5.6新建用户并创建密码时总是提示密码不符合要求:ERROR 1819 (HY000): Your password does NOT satisfy the CURRENT policy requirements。 查看得知,原来MySQL5.6.6增加了密码强...

jiangwu
2016/05/18
465
0
centos7 mysql8安装

1、添加MySQL的yum仓库 下载地址:http://dev.mysql.com/downloads/repo/yum/ 下载后,执行如下命令: 2、安装mysql 3、启动mysql 启动mysql 查看mysql状态 4、查询root密码 登陆,重新设置密...

xixingzhe
2018/06/19
268
0
【收藏】常用JavaScript正则表达式汇编与示例

1 概述 1.1 前言 目前收集整理了21个常用的javaScript正则表达式,其中包括用户名、密码强度、整数、数字、电子邮件地址(Email)、手机号码、身份证号、URL地址、 IP地址、 十六进制颜色、 ...

毛瑞_三十课
04/27
0
0
求教密码强度的验证方法

用户密码强度的验证原理是啥,不同的强度会有不同的图片颜色显示,大家帮忙指点下

ikasa007
2013/01/22
112
0
MySQL5.7 修改 root 密码

MySQL5.7 开始,增加了很多安全性的更新。老版本的用户可能会有一些不习惯,这里介绍关于5.7版本的数据库密码问题。 5.7.6 以后的版本 5.7.6 以后的版本在启动数据库的时候,会生成密码放到日...

Lailysh
2016/07/16
807
0

没有更多内容

加载失败,请刷新页面

加载更多

Taro 兼容 h5 踩坑指南

最近一周在做 Taro 适配 h5 端,过程中改改补补,好不酸爽。 本文记录📝遇到的问题,希望为有相同需求的哥们👬节约点时间。 Taro 版本:1.3.9。 解决跨域问题 h5 发请求会报跨域问题,需...

dkvirus
58分钟前
4
0
Spring boot 静态资源访问

0. 两个配置 spring.mvc.static-path-patternspring.resources.static-locations 1. application中需要先行的两个配置项 1.1 spring.mvc.static-path-pattern 这个配置项是告诉springboo......

moon888
今天
3
0
hash slot(虚拟桶)

在分布式集群中,如何保证相同请求落到相同的机器上,并且后面的集群机器可以尽可能的均分请求,并且当扩容或down机的情况下能对原有集群影响最小。 round robin算法:是把数据mod后直接映射...

李朝强
今天
4
0
Kafka 原理和实战

本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/bV8AhqAjQp4a_iXRfobkCQ 作者简介:郑志彬,毕业于华南理工大学计算机科学与技术(双语班)。先后从事过电子商务、开放平...

vivo互联网技术
今天
19
0
java数据类型

基本类型: 整型:Byte,short,int,long 浮点型:float,double 字符型:char 布尔型:boolean 引用类型: 类类型: 接口类型: 数组类型: Byte 1字节 八位 -128 -------- 127 short 2字节...

audience_1
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部