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 相关文章推荐
PJ Blog修改-禁止复制的代码和方法
Oct 25 Javascript
javascript setTimeout和setInterval 的区别
Dec 08 Javascript
javascript 传统事件模型构造的事件监听器实现代码
May 31 Javascript
表单JS弹出填写提示效果代码
Apr 16 Javascript
Jquery Change与bind事件代码
Sep 29 Javascript
javascript字符串函数汇总
Dec 06 Javascript
详解AngularJS中自定义过滤器
Dec 28 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
Nov 09 Javascript
Node.js Express 框架 POST方法详解
Jan 23 Javascript
JS实现复制内容到剪贴板功能
Feb 05 Javascript
vuex实现及简略解析(小结)
Mar 01 Javascript
微信小程序学习之自定义滚动弹窗
Dec 20 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&amp;mysql(六)
2006/10/09 PHP
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
Bootstrap的class样式小结
2016/12/01 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
Python入门篇之条件、循环
2014/10/17 Python
python实现指定字符串补全空格的方法
2015/04/30 Python
Python处理CSV与List的转换方法
2018/04/19 Python
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
python实现图片压缩代码实例
2019/08/12 Python
在CentOS7下安装Python3教程解析
2020/07/09 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
上海微创软件面试题
2012/06/14 面试题
十佳班主任事迹材料
2014/01/18 职场文书
小学庆六一活动总结
2014/08/28 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书
货款欠条范本
2015/07/03 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
企业内部管理控制:采购授权审批制度范本
2020/01/19 职场文书