JavaScript动态检验密码强度的实现方法


Posted in Javascript onNovember 09, 2016

平时我们会在某些网站的注册页面或者更改密码的页面发现当我们输入密码时,会有一个类似于进度条的长条进行提示用户输入的密码强度。如下图:

JavaScript动态检验密码强度的实现方法

我看到有些人用几张不同的图片来替换,这样似乎可以,但是不太好。所以我通过其他方式实现。

实质上这是根据用户输入的不同密码强度来改变 颜色区域的长度。

密码强度这个横条实质是一个div,其他标记也可以,div里面有一个span标记,我就是通过改变span的长度和颜色来表现密码的强度的。原理很简单,但是在操作过程中,可能会遇到一些问题很头疼。

1.先在html页面里面定义一个输入框用于输入密码,一个一个div,在div里面放一个span标签并且设置相应的属性,type,name,value,class,id等

<font color="#FF0000">*</font>密码:<input type="text" name="password" id="password" value="请输入密码" onfocus=" passwordClear()" onblur="pwdComplex(),passwordValidate()" onkeyup="pwdComplex()" /></td><td><font id="pwdTip">不少于6位字符</font><br/>

2 密码强度:

<div class="pwdStrongth"><span class="cinnerprogress" id="innerprogress"></span></div><font id="strongthTip"></font>

2.给标签设置相应的css,来控制标签的样式,使其感觉漂亮一点:

<style type="text/css">
/*用于修饰密码强度条外边框div*/
.pwdStrongth{
border:solid 1px #000000;
border-radius:5px;
height:15px;
width:150px;}
/*用于设置span标签的初始样式*/
.cinnerprogress{ 
display: block;
height: 100%;
background-color:transparent;
border-radius: 5px;
width: 100%;
}
/*下面四个将用于设置span标签在不同密码强度的样式*/
.strengthLv1{ 
display: block;
height: 100%;
border-radius: 5px;
background:red;width:25%;}
.strengthLv2{
display: block;
height: 100%;
border-radius: 5px;
background:orange;width:50%;}
.strengthLv3{
display: block;
height: 100%;
border-radius: 5px;
background:#09F;width:75%;}
.strengthLv4{
display: block;
height: 100%;
border-radius: 5px;
background:green;width:100%;}
</style>

3.写相应的JavaScript方法通过检测用户输入的密码强度来调用不同的样式来表现密码强度,密码强度的规则可以自己随意定义,只需在密码输入框的onblur(失去焦点)事件和onkeyup(按下键盘上来之后)事件调用下面的方法即可:

function pwdComplex()//用于判断密码强度的
{
var pwdobj=document.getElementById("password"); //获取密码输入框对象
var pwdTip=document.getElementById("pwdTip");//获取密码提示文字对象
var pwdprogress=document.getElementById("innerprogress"); //获取span标签对象
var strongthTip=document.getElementById("strongthTip");//获取密码强度提示文字的对象
var regxs = new Array();//定义一个数组用于存放不同的正则表达式
regxs[0]=/[^a-zA-Z0-9_]/g;
regxs[1]=/[a-z]/g;
regxs[2]=/[0-9]/g;
regxs[3]=/[A-Z]/g;
var val = pwdobj.value;//获取用户输入的密码
var len = val.length;//获取用户输入的密码长度
var sec = 0; //定义一个变量用于存放密码强度
if (len >= 6) //用于判断用户输入的密码强度
{ // 至少六个字符
for (var i = 0; i < regxs.length; i++) //遍历所有正则表达式,检测用户输入的密码符合哪些正则表达式,如果符合则强度+1
{
if (val.match(regxs[i])) 
{
sec++;
}
}
}
if(sec==0) //通过不同的密码强度调用不同的样式
{
strongthTip.innerText="";
//setAttribute("class", "className")中class是指改变class这个属性,所以要带引号,className是span标签的类名,也是对应的样式名
pwdprogress.setAttribute("class","cinnerprogress");
}
else if(sec==1)
{
strongthTip.innerText="强度:弱";
strongthTip.style.color="red";
pwdprogress.setAttribute("class","strengthLv1");
}
else if(sec==2)
{
strongthTip.innerText="强度:中"; 
strongthTip.style.color="orange";
pwdprogress.setAttribute("class","strengthLv2");
}
else if(sec==3)
{
strongthTip.innerText="强度:强"; 
strongthTip.style.color="#09F";
pwdprogress.setAttribute("class","strengthLv3");
}
else if(sec==4)
{
strongthTip.innerText="强度:超强"; 
strongthTip.style.color="green";
pwdprogress.setAttribute("class","strengthLv4");
}
}

以上所述是小编给大家介绍的JavaScript动态检验密码强度的实现方法,实现一个模拟后台数据登入的效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一个符号插入器 中用到的js代码
Sep 04 Javascript
JavaScript 对象、函数和继承
Jul 07 Javascript
基于jquery的划词搜索实现(备忘)
Sep 14 Javascript
js数组操作学习总结
Nov 04 Javascript
js对文章内容进行分页示例代码
Mar 05 Javascript
JavaScript+CSS无限极分类效果完整实现方法
Dec 22 Javascript
React.js中常用的ES6写法总结(推荐)
May 09 Javascript
如何让你的JS代码更好看易读
Dec 01 Javascript
angular5 httpclient的示例实战
Mar 12 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 #Javascript
给easyui的datebox控件添加清空按钮的实现方法
Nov 09 #Javascript
给easyui datebox扩展一个清空的实例
Nov 09 #Javascript
JS刷新父窗口的几种方式小结(推荐)
Nov 09 #Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 #Javascript
jquery easyui validatebox remote的使用详解
Nov 09 #Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
Nov 09 #Javascript
You might like
处理php自动反斜杠的函数代码
2010/01/05 PHP
for循环连续求和、九九乘法表代码
2012/02/20 PHP
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
php读取目录及子目录下所有文件名的方法
2014/10/20 PHP
php 伪造HTTP_REFERER页面URL来源的三种方法
2016/09/22 PHP
PHP7新增运算符用法实例分析
2016/09/26 PHP
PHP检测数据类型的几种方法(总结)
2017/03/04 PHP
Laravel5.7 Eloquent ORM快速入门详解
2019/04/12 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
详解Vue单元测试case写法
2018/05/24 Javascript
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
2019/02/15 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
python去除扩展名的实例讲解
2018/04/23 Python
python 删除非空文件夹的实例
2018/04/26 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
python同时替换多个字符串方法示例
2019/09/17 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
TensorFlow——Checkpoint为模型添加检查点的实例
2020/01/21 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
python3 使用traceback定位异常实例
2020/03/09 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
捐款倡议书范文
2014/02/02 职场文书
商品陈列协议书
2014/09/29 职场文书
家长评语怎么写
2014/12/30 职场文书
高中同学会致辞
2015/08/01 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
SQL语句多表联合查询的方法示例
2022/04/18 MySQL
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python