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实现密码强度检验，包括了js实现密码强度检验的使用技巧和注意事项，需要的朋友参考一下 最近一直在做通行证项目，里面的注册模块中输入密码需要显示密码强度（低中高）。今天就把做的效果给大家分享下，代码没有网上搜索的那么复杂，能够满足一般的需求。 html 代码如下： js 代码如下： 效果图： 使用说明： 1、对象的第一个参数是密码输入框的 id，第二个参数是密码强度长条的 id。
-
本文向大家介绍javascript实现密码验证，包括了javascript实现密码验证的使用技巧和注意事项，需要的朋友参考一下 本文为大家分享了javascript密码验证的实现方法，欢迎大家阅读。 javascript密码验证代码如下 希望本文对大家学习javascript程序设计有所帮助。
-
本文向大家介绍原生js实现密码强度验证功能，包括了原生js实现密码强度验证功能的使用技巧和注意事项，需要的朋友参考一下 我们在填写表单的时候，特别是输入密码的时候，经常看到实时显示密码强度的效果，那么这种效果如何通过我们的原生js实现呢？ 思路: 1.密码通常是由数字，大写字母，小写字母以及特殊字符组成 2.密码全部是纯数字或者纯大写字母，或者纯小写字母，我们认为是密码强度较低 3.密码由两种混合
-
本文向大家介绍js密码强度实时检测代码，包括了js密码强度实时检测代码的使用技巧和注意事项，需要的朋友参考一下 密码强度的判断, 在注册网站用户的时候, 是一个必须要做的事情, 不同的网站, 实现的方式是不一样的. 密码的判断, 其实也就是一个表单验证的其中一项. 那我们来实现这么一个简单的操作. 首先做一个简单的密码输入框和一个显示密码强度的进度条. 整个整体由vali_pass盒子涵盖. 这个
-
本文向大家介绍jquery密码强度校验，包括了jquery密码强度校验的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jquery密码强度校验的验证代码，分享给大家供大家参考。具体如下： 预想的效果截图如下： 关键代码： 以上就是jquery判断密码强度校验代码，大家可以应用到自己的项目中，希望大家喜欢。
-
本文向大家介绍js密码强度校验，包括了js密码强度校验的使用技巧和注意事项，需要的朋友参考一下 现在很多论坛和博客都在用户注册时添加了验证密码强度的功能，在以前的文章中，我们曾经给出过一段检验密码强度的例子，今天再看一个与《js密码强度校验》的代码。 效果： 以上就是为大家分享的js密码强度校验的全部代码，希望对大家的学习有所帮助。