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

 更新时间:2017年09月27日 08:39:59   作者:m0_37120609  
这篇文章主要介绍了Web开发使用Angular实现用户密码强度判别的方法,需要的朋友可以参考下

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 = "";
   }

页面实现效果如下:

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

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

总结

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

相关文章

  • angularjs指令中的compile与link函数详解

    angularjs指令中的compile与link函数详解

    这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下
    2014-12-12
  • 详解Angular组件之中间人模式

    详解Angular组件之中间人模式

    设计一个组件时,组件应该是内聚的,应该不依赖外部已经存在的组件,要实现这种松耦合的组件要使用中间人模式。
    2021-05-05
  • Angular中Router的常用类分享

    Angular中Router的常用类分享

    Angular Router模块提供了几个重要的类来处理路由信息,这篇文章小编就来和大家分享一下这几个类的使用吧,需要的小伙伴可以收藏一下
    2023-06-06
  • 基于angular实现模拟微信小程序swiper组件

    基于angular实现模拟微信小程序swiper组件

    这篇文章主要介绍了基于angular实现模拟微信小程序swiper组件 ,需要的朋友可以参考下
    2017-06-06
  • angularJs使用$watch和$filter过滤器制作搜索筛选实例

    angularJs使用$watch和$filter过滤器制作搜索筛选实例

    本篇文章主要介绍了angularJs使用$watch和$filter过滤器制作搜索筛选实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • AngularJS改变元素显示状态

    AngularJS改变元素显示状态

    本文主要介绍使用AngularJS提供的ng-show和ng-hide指令实现自动监听某布尔型变量来改变元素显示状态。下面跟着小编一起来看下吧
    2017-04-04
  • AngularJS中过滤器的使用与自定义实例代码

    AngularJS中过滤器的使用与自定义实例代码

    这篇文章运用实例代码给大家介绍了angularjs中过滤器的使用和自定义过滤器,对大家学习AngularJS具有一定的参考借鉴价值,感兴趣的朋友们可以参考借鉴。
    2016-09-09
  • AngularJS中transclude用法详解

    AngularJS中transclude用法详解

    这篇文章主要介绍了AngularJS中transclude用法,详细分析了transclude的具体功能、使用技巧与相关注意事项,需要的朋友可以参考下
    2016-11-11
  • AngularJS通过$http和服务器通信详解

    AngularJS通过$http和服务器通信详解

    相信大家都知道AngularJS是一个前端框架,实现了可交互式的页面,但是对于一个web应用,页面上进行展示的数据从哪里来,肯定需要服务端进行支持,那么AngularJS是如何同服务端进行交互的呢?通过这篇文章大家一起来看看吧。
    2016-09-09
  • Angular ng-repeat 对象和数组遍历实例

    Angular ng-repeat 对象和数组遍历实例

    这篇文章主要介绍了Angular ng-repeat对象和数组遍历的相关资料,并附代码示例,需要的朋友可以参考下
    2016-09-09

最新评论