JavaScript实现密码强度实时验证
更新时间：2020年03月18日 11:35:42 作者：Echo_0502
这篇文章主要为大家详细介绍了JavaScript实现密码强度实时验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript实现密码强度实时验证，供大家参考，具体内容如下
在网络服务中，为了保证用户的私密信息足够安全，会要求用户输入具有一定安全级别的密码，这样可以更好的防止他人盗用。比如在注册一些游戏账号时，如果输入纯数字或纯英文字符低于6位，就会提示密码强度太低，请重新输入。一些密码强度验证的方法都是计算字符的类型，然后分类加权累算。权重越高，相应的强度也就越高。
具体的写法及实现方式有很多种，本文只介绍其中一种方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>密码强度实时验证</title>
</head>
<body>
<h2>密码强度实时验证</h2>
<input id="passwordStrength" data-hint='请输入密码' type="password" ><span id="showStrength"></span>
<script type="text/javascript">
window.onload = function () {
function setCss(_this,cssOption){
//判断节点类型
if (!_this || _this.nodeType ===3 || _this.nodeType === 8 ||!_this.style) {
return;
}
for(var cs in cssOption){
_this.style[cs] = cssOption[cs];
}
return _this;
}
function trim(chars){
return (chars ||"").replace(/^(\s|\u00a0)+|(\s|\u00a0)+$/g,"");
}
function passwordStrength(passwordStrength,showStrength){
var self = this;
/*字符权重；
数字1，字母2，其他字符为3
当密码长度小于6时不符合标准
长度>=6，强度小于10，强度弱
长度>=6，长度>=10且<15，强度中
长度>=6，强度>=15，强*/
passwordStrength.onkeyup = function(){
var _color = ["red","yellow","orange","green"],
msgs = ["密码太短","弱","中","强"],
_strength = 0,
_v= trim(passwordStrength.value)
_vL= _v.length,
i=0;
var charStrength = function(char){
//计算单个字符强度
if(char>=48 && char <=57){//数字
return 1;
}
if(char>=97 && char<=122){//小写
return 2;
}else{
return 3; //特殊字符
}
}
if(_vL<6){//计算模式
showStrength.innerText = msgs[0];
setCss(showStrength,{
"color":_color[0]
})
}else{
for(;i<_vL;i++){
//遍历字符
_strength+=charStrength(_v.toLocaleLowerCase().charCodeAt(i));
}
if(_strength<10){
//强度小于10
showStrength.innerText = msgs[1];
setCss(showStrength,{
"color":_color[1]
})
}
if(_strength>=10&&_strength<15){
showStrength.innerText = msgs[2];
setCss(showStrength,{
"color":_color[2]
})
}
if(_strength>=15){
showStrength.innerText = msgs[3];
setCss(showStrength,{
"color":_color[3]
})
}
}
}
}
passwordStrength(
document.getElementById("passwordStrength"),
document.getElementById("showStrength"));
};
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了js实现鼠标点击左上角滑动菜单效果代码,涉及JavaScript基于鼠标事件动态变换页面元素样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
惰性载入表示函数执行的分支只会在函数第一次掉用的时候执行，在第一次调用过程中，该函数会被覆盖为另一个按照合适方式执行的函数，这样任何对原函数的调用就不用再经过执行的分支了2013-08-08
然后请分析下程序,我出以下题目,供牛牛们练手(RPG游戏开发 - 实战,不搞理论,着重程序实现思路).2009-04-04
这篇文章主要为大家详细介绍了JS实现滑动条案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要教大家学习使用Bootstrap栅格系统，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
本文主要介绍了Echart中国地图更换背景图的方法示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要为大家详细介绍了基于javascript制作微信聊天面板的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-03-03
这篇文章主要介绍了bootstrap实现每隔5秒自动轮播效果，可以自己设置轮播间隔时间，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
bootstrap自定义样式之bootstrap实现侧边导航栏功能
bootstrap自带的响应式导航栏是向下滑动的，有时满足不了个性化的需求，需要做一个类似于android drawerLayout 侧滑的菜单，这就是我要实现的bootstrap自定义侧滑菜单。接下来通过本文给大家介绍bootstrap实现侧边导航栏功能，感兴趣的朋友一起看看吧2018-09-09
这篇文章主要为大家介绍了JavaScript分水岭CommonJS对比ES模块分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
最新评论