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实现用户密码强度判别的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Angularjs修改密码的实例代码

    修改密码逻辑思维 首先要输入旧的密码,判断旧的密码是否正确(后台判断) 其次输入新的密码,判断新密码格式(可增加) 最后判断新密码和确认密码输入是否一致 html部分 <form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-sm-2 control-label"><i c

  • angularjs2 ng2 密码隐藏显示的实例代码

    angularjs2 ng2 密码隐藏显示代码结合ionic2开发移动端项目,注册页的密码的input一般用password,但是用户输入密码时可能会输入错误,需要显示成text. 如图: 首先,输入框的类型判断: <ion-input type="{{pwshow?'text':'password'}}" placeholder="输入密码"></ion-input> 然后,添加眼睛的点击事件,ngClass判断图标样式: <a hr

  • angularjs 表单密码验证自定义指令实现代码

    html代码 <form name="form"> <input type="password" name="password" ng-model="password" required placeholder="请输入密码"> <input type="password" name="passwordConfirm" ng-model=

  • AngularJs验证重复密码的方法(两种)

    本文给大家分享angularjs验证重复密码的两种方法.具体方法详情如下所示: 第一种: <label for="password">密码</label> <input id="password" name="password" type="password" ng-model="user.password" required> <label for="r

  • 在 Angular2 中实现自定义校验指令(确认密码)的方法

    我们会在本文中探索 Angular 2 内建的自定义验证. # 介绍 Angular 2 原生就支持一些有用的验证器: required: 验证字段必须存在 minlength: 验证字段值的最小长度有效 maxlength: 验证字段值的最大长度有效 pattern: 验证输入的值是否匹配给定的模板,比如 email 我们会基于下面的接口创建一个表单来获取用户信息. // user.interface.ts export interface User { username: string; /

  • AngularJS前端页面操作之用户修改密码功能示例

    本文实例讲述了AngularJS前端页面操作之用户修改密码功能.分享给大家供大家参考,具体如下: 最近在做前端设计,主要使用的知识有AngularJS和nodejs来进行页面显示和数据请求.处理等工作.在设计页面比如忘记密码时,发现一个有效的设计思路是很重要的. 就以修改密码为例,要将提示信息友好的展示给用户,明确告诉用户在操作的过程中那部分有问题,这需要定义详细的变量以及能在页面的不同位置显示信息.下面的代码是自己写的一个简单例子,记录学习进程. changePwd var app = ang

  • angular仿支付宝密码框输入效果

    项目需求,使用ng写一个密码框格子支付模块,一开始使用一个input+letter-spacing来分割字符,但是发现间距非常不好控制,随着字符的输入文本框字符串间距还会自动调整.最终从网上查找到一款jq仿支付宝密码输入框,于是我模仿编写了个指令模块. 效果如下: 完整代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <met

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

    Web前端使用Angular实现用户密码强度判别小记 用户密码合法条件: 1.8~16个字符 2.只能包含数字,字母和"_" "."(即不能含有非法特殊字符) 3.数字,字母和"_" "." 至少包含两种 实现过程: 长度检测-注:要区分中文和英文,中文两个字节,英文一个字节,在密码输入的时候是不能输入中文,但在检测用户名的使用,就需要区分中英文 // 获取字符串长度:中文也可正常获取 function GetStrLengt

  • JavaScript动态检验密码强度的实现方法

    平时我们会在某些网站的注册页面或者更改密码的页面发现当我们输入密码时,会有一个类似于进度条的长条进行提示用户输入的密码强度.如下图: 我看到有些人用几张不同的图片来替换,这样似乎可以,但是不太好.所以我通过其他方式实现. 实质上这是根据用户输入的不同密码强度来改变 颜色区域的长度. 密码强度这个横条实质是一个div,其他标记也可以,div里面有一个span标记,我就是通过改变span的长度和颜色来表现密码的强度的.原理很简单,但是在操作过程中,可能会遇到一些问题很头疼. 1.先在html页面里面

  • java web开发中获取tomcat上properties文件内容的方法

    在java web开发的时候经常会用到读取读取或存放文件,这个文件的默认路径在哪里呢?写死在程序里面显然是可以的,但这样子不利于位于,假如有一天项目从window移植到linux,或者保存文件的路径变了,就需要去源代码中查找,进行替换,这样子不仅效率低,而且程序的耦合度也会过高,这里我用了一个properties文件用于存放文件的保存路径,需要保存或者读取都来自己properties所保存的路径. 1.我存放的propeities文件路径 因为linux和window上面的分盘是不一样的,所以我

  • Oracle数据库用户密码过期的解决方法

    目录 问题现象: 问题分析: 解决方法: 总结 问题现象: 今天在更改数据库数据的时候,程序报错了,如下: ORA-28001:the password has expired 问题分析: 很显然,报错原因就是: 密码已过期! 所以现在需要做的事情只有两件: 1.修改密码的过期时间 2.修改/重置密码 这里分析一下为什么要这样做: 1.修改密码的过期时间:这是因为Oracle Database 11g 版本的Oracle数据库有一项默认配置,就是密码过期时间默认为180天(6个月左右): 通过s

  • JavaScript实现密码强度实时验证

    JavaScript实现密码强度实时验证,供大家参考,具体内容如下 在网络服务中,为了保证用户的私密信息足够安全,会要求用户输入具有一定安全级别的密码,这样可以更好的防止他人盗用.比如在注册一些游戏账号时,如果输入纯数字或纯英文字符低于6位,就会提示密码强度太低,请重新输入.一些密码强度验证的方法都是计算字符的类型,然后分类加权累算.权重越高,相应的强度也就越高. 具体的写法及实现方式有很多种,本文只介绍其中一种方案 <!DOCTYPE html> <html lang="en

  • js如何验证密码强度

    验证"密码强度"的例子很常见,我们注册新的账号的时候往往设置密码,此时就遇到验证密码强度的问题了."密码强度"也就是密码难易程度的意思. 原理: 1.如果输入的密码为单纯的数字或者字母:提示"低" 2.如果是数字和字母混合的:提示"中" 3.如果数字.字母.特殊字符都有:提示"强" 下面是一种"密码强度"的验证方法,觉得很有意思. HTML和CSS代码: <!DOCTYPE HTM

  • java web中使用cookie记住用户的账号和密码

    毕业设计中需要用到记住账号密码的功能,网上搜到了一个解决方案,自己稍加改造就是下面的方法. 首先是登录的页面,当用户勾选记住密码,传递给controller(我用的SSM框架),后台设置cookie的值,然后下次登录的时候就不用再次输入账号和密码了. login.jsp的代码: <%@page import="org.apache.commons.lang.StringUtils"%> <%@ page language="java" conten

  • js检测用户输入密码强度

    一个用Javascript检测用户输入密码强度的效果代码,以下代码主要是从以下四个方面检测用户输入的密码的强度的,有兴趣的朋友可以自己添加或修改成自己想要的形式! 1. 如果输入的密码位数少于5位,那么就判定为弱. 2. 如果输入的密码只由数字.小写字母.大写字母或其它特殊符号当中的一种组成,则判定为弱. 3. 如果密码由数字.小写字母.大写字母或其它特殊符号当中的两种组成,则判定为中. 4. 如果密码由数字.小写字母.大写字母或其它特殊符号当中的三种以上组成,则判定为强. 先来看看这个实现的效

  • PHP和Java的主要区别有哪些?哪个最适合Web开发语言?

    一.前言 PHP和Java都是现在比较流行的二种编程语言. 对于许多新手来说,都会思考如果学的时候,该学哪种语言呢?下面这篇文章给大家整理两者的区别以及一些选择建议,一起来看看吧. 二.简介 PHP与Java作为两种截然不同的程序开发语言,无论是技术层面还是发展空间,亦或是市场份额占比,都有着不同的表现方式,理念上的不同导致了Java和PHP在Web应用开发上显示了不同的结果.若要一定追根到底,深究PHP与Java究竟哪个更好? 简而言之:PHP是一种解释执行的脚本语言,语法和C语言类似,易学易

  • Java Web开发防止多用户重复登录的完美解决方案

    目前web项目中,很多情况都是可以让同一个账户信息在不同的登录入口登录这次,这样子就不那么美好了. 推荐阅读: Java 多用户登录限制的实现方法 现在有两种解决方案: 1.将用户的登录信息用一个标志位的字段保存起来,每次登录成功就标记1,注销登录就标记为0,当标记为1的时候不允许别人登录. 2.将用户的登录信息保存在application内置作用域内, 然后利用session监听器监听每一个登录用户的登录情况. 很显然,第一种方式 每次登录 都需要操作数据库,多了一些不必要的性能开销,而且在登

随机推荐