使用javascript对密码进行有密码强度提示的验证

好些网站的注册功能中,都有对密码进行验证并且还有强度提示。下面就来实现这种效果。
密码强度说明:
密码强度:弱——纯数字,纯字母,纯符号
密码强度:中——数字,字母,符号任意两种的组合
密码强度:强——数字,字母,符号全部都要有
实现思路:
在输入框提示区域编写两个div层,一个显示提示文字,一个显示密码强度提示。
给文本框添加onkeyup的验证事件:
1.没有输入时,显示“密码可由字母、数字、特殊符号组成,长度为6-18个字符”;
2.光标聚焦到文本框中,在密码长度没有6位之前,显示“密码不少于6位”提示文字;
3.当文本框中的字符达到6位后,显示提示文字的层隐藏,显示密码强度的层显示出来;
4.通过正则表达式控制密码强度提示的三个span的显隐,对上面三种情况,只需要对第一种,第三种进行验证即可,相对来说,这两个表达式比较好些一点。这两种验证后也都剩下任意两种组合,无需再编写表达式对第二种验证。
关键代码如下:
JS代码:
var reg1 = /(^\d{6,}$)|(^[a-zA-Z]{6,}$)|(^[^a-zA-Z0-9]{6,}$)/; //数字,字母或符号其中的一种
var reg7 = /\d*\D*((\d+[a-zA-Z]+[^0-9a-zA-Z]+)|(\d+[^0-9a-zA-Z]+[a-zA-Z]+)|([a-zA-Z]+\d+[^0-9a-zA-Z]+)|([a-zA-Z]+[^0-9a-zA-Z]+\d+)|([^0-9a-zA-Z]+[a-zA-Z]+\d+)|([^0-9a-zA-Z]+\d+[a-zA-Z]+))\d*\D*/; //数字字母字符任意组合
function check_pwd() {
var pwd = document.getElementByIdx_x_x_x_x_x("txtPwd").value;
if (pwd.length < 6) {
$("#pwdPrompt div:eq(1)").html("密码长度不能小于6位");
return false;
} else {
$("#pwdPrompt div:eq(1)").css("display", "none");
$("#pwdPrompt div:eq(0)").css("display", "block");
if (reg1.test(pwd)) {
$("#pwdLength span:eq(0)").css("display", "block");
$("#pwdLength span:eq(1)").css("display", "none");
$("#pwdLength span:eq(2)").css("display", "none");
return true;
}
else if (!reg7.test(pwd)) {
$("#pwdLength span:eq(0)").css("display", "block");
$("#pwdLength span:eq(1)").css("display", "block");
$("#pwdLength span:eq(2)").css("display", "none");
return true;
}
else {
$("#pwdLength span:eq(0)").css("display", "block");
$("#pwdLength span:eq(1)").css("display", "block");
$("#pwdLength span:eq(2)").css("display", "block");
return true;
}
return true;
}
}
Html代码:
<style type="text/css">
#pwdLength span {
display: none;
float: left;
height: 14px;
width: 51px;
font-size: 12px;
text-align: center;
line-height: 14px;
color: white;
border-right: 1px solid white;
}
</style>
<input id="txtPwd" onkeyup="return check_pwd()" type="password" /><br />
<div id="pwdPrompt">
<div id="pwdLength">
<span style=" background-color:#999;">弱</span>
<span style=" background-color:#666;">中</span>
<span style=" background-color:#333;">强</span>
</div>
<div style="width: 340px;">密码可由字母、数字、特殊符号组成,长度为6-18个字符</div>
</div>
使用javascript对密码进行有密码强度提示的验证的更多相关文章
- javascript实现playfair和hill密码算法
时至期末,补习信息安全概论作业.恰巧遇古典密码学算法中的playfair算法和hill算法,用javascript语言实现起来是在有趣,边查百度边编码,顺便好好补习一下javascript基础. pl ...
- javascript记住用户名和登录密码
javascript记住用户名和登录密码 下面主要通过代码给大家展示下javascript记住用户名和登录密码,具体代码内容请看下文. <script type="text/javas ...
- python 字符串实例:检查并判断密码字符串的安全强度
检查并判断密码字符串的安全强度 import string def check(pwd): #密码必须至少包含六个字符 if not isinstance(pwd,str) or len(pwd)&l ...
- MVC5 网站开发之六 管理员 2、添加、删除、重置密码、修改密码、列表浏览
目录 奔跑吧,代码小哥! MVC5网站开发之一 总体概述 MVC5 网站开发之二 创建项目 MVC5 网站开发之三 数据存储层功能实现 MVC5 网站开发之四 业务逻辑层的架构和基本功能 MVC5 网 ...
- 强密码和弱密码并没有什么区别?NIST密码安全标准更新:不再建议密码要求混合大写字母、字符和数字
作为一名认真负责的小编,每次注册账号设置密码的时候都是最痛苦的,太简单的怕被破解,太难的又记不住. 等你好不容易记住密码,三个月后IT同学过来拍拍你的肩膀,"你的密码到期了,记得改啊--&q ...
- ssm中通过ajax或jquer的validate验证原密码与修改密码的正确性
一.ajax 1. <script type="text/javascript"> //验证原密码1.ajax,正则 var ok1=false,ok2=false,o ...
- Mysql 5.7 忘记root密码或重置密码的详细方法
在Centos中安装完MySQL数据库以后,不知道密码,这可怎么办,下面给大家说一下怎么重置密码 在Centos中安装完MySQL数据库以后,不知道密码,这可怎么办,下面给大家说一下怎么重置密码 1. ...
- linux(centos)下密码有效期和密码复杂度设置
1.密码有效期 方法一: chage -l 用户名 查看用户的过期时间 chage -M 99999 用户名 用命令修改过期时间为永久 chage -M 90 用户名 设置密码有效期为90天 chag ...
- oracle 密码忘记、密码遗失解决办法
忘了密码可以用操作系统验证方式登入SYS用,然后可以随意修改密码了.登入方法:1.进入命令提示符下,输入:sqlplus /nolog 回车进入SQL.2.在SQL环境下,输入:SQL> con ...
随机推荐
- 在Sharepoint 2013中,使用JS判断当前用户是否在某个组里面
使用Sharepoint客户端对象模型,判断当前用户是否在某个组里面. 在View 和 Edit List Item的时候使用,使用户编辑修改List Item的时候有权限的区分. 在Edit 页面加 ...
- Provider Hosted App中使用JOM问题
在使用SharePoint 2013的JOM时,出现以下问题: ReferenceError: SP is not defined 经反复试验和搜索,得出以下两种方式: 一.直接引用JS文件,引用顺序 ...
- 在Android Stuido中使用Lint
要运行Lint工具,大家首先需要在Android Studio的“Analyze”菜单中选择“Inspect Code…”.当Android Studio完成了对项目的检测之后,它会在窗口底部显示出分 ...
- android加固系列—6.仿爱加密等第三方加固平台之动态加载dex防止apk被反编译
[版权所有,转载请注明出处.出处:http://www.cnblogs.com/joey-hua/p/5402599.html ] 此方案的目的是隐藏源码防止直接性的反编译查看源码,原理是加密编译好的 ...
- Sublime Text 3 如何修改默认快捷键
修改之前先备份快捷键的配置 问题所在 Sublime Text 3 出来了这么长时间,虽然是 Beta 版,还是决定尝试一波 在安装完之后,就想根据自己的习惯调整快捷键. 结果却发现,在 ST3 中, ...
- zh-Hans vs.net 通过 管理nuget程序包下载简体中文语言包 zh-cn
zh-Hans vs.net 通过 管理nuget程序包下载简体中文语言包 在搜索中输入:zh-hans
- 关于SQLSERVER2012版本远程登录问题
最近公司新配置了一台服务器,安装的数据库版本为sqlserver2012企业版本,一切安装正常,本地登录也正常 需要远程客户端登录,防火墙也开放的端口,路由器也做了端口映射,因为我们有两台服务器,14 ...
- js:插入节点appendChild insertBefore使用方法
首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在 ...
- JAVA NIO中的Channels和Buffers
前言 Channels和Buffers是JAVA NIO里面比较重要的两个概念,NIO正是基于Channels和Buffers进行数据操作,且数据总是从Channels读取到Buffers,或者从Bu ...
- 让UNION与ORDER BY并存于SQL语句当中
在SQL语句中,UNION关键字多用来将并列的多组查询结果(表)合并成一个结果(表),简单实例如下: SELECT [Id],[Name],[Comment] FROM [Product1] UNIO ...