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 相关文章推荐
Prototype Function对象 学习
Jul 12 Javascript
javascript CSS画图之基础篇
Jul 29 Javascript
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
解决遍历时Array.indexOf产生的性能问题
Jul 03 Javascript
jquery实现手风琴效果实例代码
Nov 15 Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 Javascript
深入浅析JavaScript中的constructor
Apr 19 Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 Javascript
vue-router 导航钩子的具体使用方法
Aug 31 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
Jun 19 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
vue请求数据的三种方式
Mar 04 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中iconv函数使用方法
2008/05/24 PHP
PHP中文件缓存转内存缓存的方法
2011/12/06 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
2007/11/30 Javascript
关于递归运算的顺序测试代码
2011/11/30 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
不使用jquery实现js打字效果示例分享
2014/01/19 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
简单的分页代码js实现
2016/05/17 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
JavaScript标准对象_动力节点Java学院整理
2017/06/27 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
webpack4简单入门实例
2018/09/06 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
在Python中使用SimpleParse模块进行解析的教程
2015/04/11 Python
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
Python爬虫模拟登录带验证码网站
2016/01/22 Python
python3+PyQt5实现柱状图
2018/04/24 Python
Python中判断输入是否为数字的实现代码
2018/05/26 Python
python重试装饰器的简单实现方法
2019/01/31 Python
django基础学习之send_mail功能
2019/08/07 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
HTML5引入的新数组TypedArray介绍
2012/12/24 HTML / CSS
英国最红的高街时尚品牌:Topshop
2016/08/05 全球购物
澳大利亚时尚前卫设计师珠宝在线:Amber Sceats
2017/10/04 全球购物
学习优秀党员杨宗兴先进事迹材料思想汇报
2014/09/14 职场文书
公司员工管理制度
2015/08/04 职场文书
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电