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

时间: 2017-09-25

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

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

Angularjs修改密码的实例代码

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

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

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

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

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

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

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

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

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

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

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

jQuery UI插件自定义confirm确认框的方法

本文实例讲述了jQuery UI插件自定义confirm确认框的方法.分享给大家供大家参考.具体分析如下: 这段代码通过jQuery UI自定义了一个confirm的确认对话框效果,通过html代码自定义对话框的显示界面和外观,可以自定义confirm框的按钮,本例中定义了一个confirm确认按钮和一个cancel取消按钮. html代码 <button id="callConfirm">Confirm!</button> <div id="d

在spring中使用自定义注解注册监听器的方法

接口回调 监听器本质上就是利用回调机制,在某个动作发生前或后,执行我们自己的一些代码.在Java语言中,可以使用接口来实现. 实现一个监听器案例 为了方便,直接在spring环境中定义:以工作(work)为例,定义工作开始时(或结束时)的监听器. 1. 定义回调的接口 package com.yawn.demo.listener; /** * @author Created by yawn on 2018-01-21 13:53 */ public interface WorkListener

在MySQL数据库中复位根用户的密码的方法

如果你从未为MySQL设置根用户密码,服务器在以根用户身份进行连接时不需要密码.但是,建议你为每个账户设置密码. 如果你以前设置了根用户密码,但却忘记了该密码,可设置新的密码.下述步骤是针对Windows平台的.在本节后面的内容中,介绍了针对Unix平台的步骤. 在Windows平台下,该步骤是: 以系统管理员身份登录到系统. 如果MySQL服务器正在运行,停止它.对于作为Windows服务运行的服务器,进入服务管理器: 开始菜单->控制面板->管理工具->服务 然后在列表中找出MySQ

Android中MPAndroidChart自定义绘制最高点标识的方法

前言 MPAndroidChart是一款基于Android的开源图表库,MPAndroidChart不仅可以在Android设备上绘制各种统计图表,而且可以对图表进行拖动和缩放操作,应用起来非常灵活.MPAndroidChart显得更为轻巧和简单,拥有常用的图表类型:线型图.饼图.柱状图和散点图. MPAndroidChart自定义绘制最高点标识 距离上次发布关于 MPAndroidChart 的文章已经过去一个多月了,项目中新增了一个需求,看起来很简单.就是在最高点绘制矩形框,标识最高点的数值

在ubuntu中重置mysql服务器root密码的方法

首先停止mysql服务: 复制代码 代码如下: root@webserver:/home/webmaster# service mysql stop 接着采用忽略密码认证模式重新创建一个mysql服务: 复制代码 代码如下: root@webserver:/home/webmaster# mysqld --user=mysql --skip-grant-tables --skip-networking & 成功启动后返回PID及其它启动信息 复制代码 代码如下: [1] 3591 root@we

springboot中使用自定义两级缓存的方法

工作中用到了springboot的缓存,使用起来挺方便的,直接引入redis或者ehcache这些缓存依赖包和相关缓存的starter依赖包,然后在启动类中加入@EnableCaching注解,然后在需要的地方就可以使用@Cacheable和@CacheEvict使用和删除缓存了.这个使用很简单,相信用过springboot缓存的都会玩,这里就不再多说了.美中不足的是,springboot使用了插件式的集成方式,虽然用起来很方便,但是当你集成ehcache的时候就是用ehcache,集成redi

Angular实现模版驱动表单的自定义校验功能(密码确认为例)

HTML5原生的表单校验属性(必填,长度限制,取值间隔,正则表达式等等)可以满足普通的校验需求,但是有些场景必须用到自定义校验,比如注册时的密码确认,有比对关系的时间/数值选择, 需要到请求到服务端取值验证等等···这里以密码确认为例进行说明. 指令开发 表单的验证状态是通过 formContro l的 errors 属性反馈出来的,所以基本的思路肯定就是需要添加校验规则,然后将验证结果添加到formControl实例的errors属性中.那么问题来了,模版驱动表单的控制都是在HTML模版中完成

Angular2表单自定义验证器的实现

本文主要给大家介绍如何判断验证器的结果.在这里,我们就来看看怎样实现一个自定义的验证器. 目标 我们要实现一个验证手机号的验证器,使用的实例还是基于之前的文章里面的实例,也就是用户信息输入的表单页面.我们在手机号的元素上添加一个验证手机号的验证器.然后,如果手机号验证失败,就显示一个错误,页面如下: 这部分教程的代码可以从github获取: git clone https://github.com/Mavlarn/angular2-forms-tutorial 如果要运行,进入项目目录,运行下面

js中利用cookie实现记住密码功能

在登录界面添加记住密码功能,我首先想到的是在java后台中调用cookie存放账号密码,大致如下: HttpServletRequest request HttpServletResponse response Cookie username = new Cookie("username ","cookievalue"); Cookie password = new Cookie("password ","cookievalue&quo