Web开发使用Angular实现用户密码强度判别的方法


Posted in Javascript onSeptember 27, 2017

Web前端使用Angular实现用户密码强度判别小记

用户密码合法条件:

1、8~16个字符

2、只能包含数字,字母和”_” “.”(即不能含有非法特殊字符)

3、数字,字母和”_” “.” 至少包含两种

实现过程:

长度检测-注:要区分中文和英文,中文两个字节,英文一个字节,在密码输入的时候是不能输入中文,但在检测用户名的使用,就需要区分中英文

// 获取字符串长度:中文也可正常获取
function GetStrLength(strData)
{
 if(!strData){
  return 0;
 }
 var length = 0;
 for (var i=0; i<strData.length; i++) { 
  var char = strData.charCodeAt(i); 
  //单字节加1 
  if ((char >= 0x0001 && char <= 0x007e) || (0xff60 <= char && char <= 0xff9f)) 
  { 
   length++; 
  } 
  else
  { 
   length+=2; 
  } 
 } 
 return length;
}

检测是否包含字母:

function isIncludeLiter(strData)
{ if(!strData){
  return false;
 }
 var reg = /[a-z]/i;
 if (!reg.test(strData))
 {
  return false;
 }
 return true;
}

检测是否包含数字:

function isIncludeNumber(strData)
{
 if(!strData){
  return false;
 }
 var reg = /[0-9]/;
 if (!reg.test(strData))
 {
  return false;
 }
 return true;
}

检测是否包含特殊字符:这里包含所有特殊字符

function isIncludeSChar(strData)
{
 if(strData == ""){
  return false;
 }
 // 全部特殊字符
 var reg = new RegExp("[`~!@#$^&*%()_+=|{}':;',\\-\\[\\].<>/?~!@#¥……&*()——|{}【】‘;:”“'。,、?]") 
 return reg.test(strData);
}

统计指定特殊字符的个数:这里只统计特殊字符 “-” “.”

function calcCharCount(strData) {
 var matchResult = {
  lineCounts: 0, //'-'个数
  dotCounts: 0 // '.'个数
 };
 if(!strData){
  return JSON.stringify(matchResult);
 }
 var lineChar = "-", dotChar = "\\."; // 要统计的字符
 var lineRegex = new RegExp(lineChar, 'g'), dotRegex = new RegExp(dotChar, 'g'); // 使用g表示整个字符串都要匹配
 var lineResult = strData.match(lineRegex);
 matchResult.lineCounts = !lineResult ? 0 : lineResult.length;
 var dotResult = strData.match(dotRegex);
 matchResult.dotCounts = !dotResult ? 0 : dotResult.length;
 return JSON.stringify(matchResult);
}

密码强度判断条件:

弱 ? 密码中仅包含数字、字母;
中 ? 密码中包含数字、字母和任一特殊字符;
强 ? 口令中包含数字、字母和多个特殊字符;

代码较多,直接整体粘贴复制:

var len = GetStrLen($scope.newPswd); // 获取字符串长度
   var matchResult = JSON.parse(calcCharCount($scope.newPswd)); // 查找 '-' '.' 特殊字符的数量
   // 条件1 判断
   $scope.newPswdValidOne = (len >= 8 && len <= 16);
   // 条件2 判断
   $scope.newPswdValidTwo = !isIncludeSChar($scope.newPswd);
   // 包含 '-' '.' 特殊字符
   $scope.newPswdHasSChar = $scope.newPswdValidTwo && (matchResult.lineCounts > 0 || matchResult.dotCounts > 0);
   // 包含字母
   $scope.newPswdHasLiter = isIncludeLiter($scope.newPswd);
   // 包含数字
   $scope.newPswdHasNumber = isIncludeNum($scope.newPswd);
   // 条件3 判断
   $scope.newPswdValidThree = ($scope.newPswdHasNumber && $scope.newPswdHasLiter) || // 数字和字母
   ($scope.newPswdHasNumber && $scope.newPswdHasSChar) || // 数字和特殊字符
   ($scope.newPswdHasLiter && $scope.pswdValidChars) || // 字母和特殊字符
   ($scope.newPswdHasLiter && $scope.newPswdHasNumber && $scope.pswdValidChars); // 数字、字母和特殊字符
   // 新密码是否合法
   $scope.newPswdValid = $scope.newPswdValidOne && $scope.newPswdValidTwo && $scope.newPswdValidThree;
   // 密码等级判断
   // 3.密码中包含数字、字母和多个特殊字符时,密码强度强
   if ($scope.newPswdValid && $scope.newPswdHasNumber && $scope.newPswdHasLiter && (matchResult.lineCounts > 0 && matchResult.dotCounts > 0)) {
    $scope.newPswdRank = 3;
    $scope.newPswdRankText = "强";
   }
   // 2.密码中包含数字、字母和任一特殊字符时,密码强度中;
   else if ($scope.newPswdValid && $scope.newPswdHasNumber && $scope.newPswdHasLiter && (matchResult.lineCounts > 0 || matchResult.dotCounts > 0)) {
    $scope.newPswdRank = 2;
    $scope.newPswdRankText = "中";
   }
   // 1.密码中仅包含数字、字母时,密码强度弱;
   else if ($scope.newPswdValid && $scope.newPswdHasNumber && $scope.newPswdHasLiter) {
    $scope.newPswdRank = 1;
    $scope.newPswdRankText = "弱";
   }
   // 密码不合法
   else {
    $scope.newPswdRank = 0;
    $scope.newPswdRankText = "";
   }

页面实现效果如下:

Web开发使用Angular实现用户密码强度判别的方法

Web开发使用Angular实现用户密码强度判别的方法

Web开发使用Angular实现用户密码强度判别的方法

Web开发使用Angular实现用户密码强度判别的方法

Web开发使用Angular实现用户密码强度判别的方法

代码中的 $scope 是AngularJS中的变量,如果不使用AngularJS,可以直接去掉,代码点击这里(由于资源上传看后暂时看不到资源列表,所以暂时无法下载,等待资源上传成功,会更新地址,到时候你们再去下载吧)进行下载

总结

以上所述是小编给大家介绍的Web开发使用Angular实现用户密码强度判别的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
从Ajax到JQuery Ajax学习
Feb 14 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 Javascript
jQuery的each终止或跳过示例代码
Dec 12 Javascript
js锁屏解屏通过对$.ajax进行封装实现
Jul 31 Javascript
JavaScript获取一个范围内日期的方法
Apr 24 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
Jul 31 Javascript
jquery彩色投票进度条简单实例演示
Jul 23 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
vue集成chart.js的实现方法
Aug 20 Javascript
小程序实现背景音乐播放和暂停
Jun 19 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 Javascript
在vue项目中 实现定义全局变量 全局函数操作
Oct 26 Javascript
基于复选框demo(分享)
Sep 27 #Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 #Javascript
angular内置provider之$compileProvider详解
Sep 27 #Javascript
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 #Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 #Javascript
Node.js dgram模块实现UDP通信示例代码
Sep 26 #Javascript
深入理解ES6 Promise 扩展always方法
Sep 26 #Javascript
You might like
PHP采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
PHP单例模式实例分析【防继承,防克隆操作】
2019/05/22 PHP
Jquery中删除元素的实现代码
2011/12/29 Javascript
js原型链原理看图说明
2012/07/07 Javascript
在新窗口打开超链接的方法小结
2013/04/14 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
JS实现图片高亮展示效果实例
2015/11/24 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
关于webpack2和模块打包的新手指南(小结)
2017/08/07 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
[42:22]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第一局
2016/02/27 DOTA
多版本Python共存的配置方法
2017/05/22 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
pytorch torch.nn.AdaptiveAvgPool2d()自适应平均池化函数详解
2020/01/03 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
keras的三种模型实现与区别说明
2020/07/03 Python
python批量生成条形码的示例
2020/10/10 Python
大学生期末自我鉴定
2014/02/01 职场文书
银行批评与自我批评
2014/02/10 职场文书
就业协议书
2014/09/12 职场文书
先进人物事迹材料
2014/12/29 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
2016年寒假家长评语
2015/10/10 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书
读《人生的智慧》有感:闲暇是人生的精华
2019/12/25 职场文书
将图片保存到mysql数据库并展示在前端页面的实现代码
2021/05/02 MySQL
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python
pandas数值排序的实现实例
2021/07/25 Python
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js