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 相关文章推荐
input 高级限制级用法
Mar 26 Javascript
解析js原生方法创建表格效率测试
Jul 08 Javascript
javascript读取Xml文件做一个二级联动菜单示例
Mar 17 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
基于ajax实现文件上传并显示进度条
Aug 03 Javascript
JS+CSS实现表格高亮的方法
Aug 05 Javascript
js跨域资源共享 基础篇
Jul 02 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
Oct 11 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
JS实现指定区域的全屏显示功能示例
Apr 25 Javascript
vue实现中部导航栏布局功能
Jul 30 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
Feb 08 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网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
PHP中3种生成XML文件方法的速度效率比较
2012/10/06 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
java script编程起步(第三课)
2007/01/10 Javascript
基于Jquery的简单&amp;简陋Tabs插件代码
2010/02/09 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
2014/03/04 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
python实现rest请求api示例
2014/04/22 Python
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
Python 查看文件的编码格式方法
2017/12/21 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
pymysql 开启调试模式的实现
2019/09/24 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
关于tf.reverse_sequence()简述
2020/01/20 Python
Snapfish英国:在线照片打印和个性化照片礼品
2017/01/13 全球购物
一些高难度的SQL面试题
2016/11/29 面试题
捷科时代的软件测试笔试题
2015/11/09 面试题
学习党章的体会
2014/11/07 职场文书
中学教师个人总结
2015/02/10 职场文书
2015年销售工作总结范文
2015/03/30 职场文书
2015年“7.11”世界人口日宣传活动方案
2015/05/06 职场文书
护士心得体会范文
2016/01/25 职场文书
九年级语文教学反思
2016/03/03 职场文书
员工工作失职检讨书范文!
2019/07/03 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电