Jquery之密码强度校验组件

       在互联网上几乎每一个站点都会提供用户注册入口，而在注册的页面中我们经常会看到用户密码强度的校验功能。它可以实时显示当前用户输入密码的强度值，然后以显示信息的方式反馈给注册用户，以提醒用户是否对密码进行修改。

      首先介绍下密码强度校验的原理：在客户端通过一套规则对用户输入的密码进行评分，通过判断这个分数所处的阶段给出相应的强度级别。对用户密码的评分项主要包括密码长度、特殊字符、数字+大小写字母组合情况等。在这套规则中对每一项测试添加权值，通过统计总分来获取对该密码的评分。
现在来看下这个组件的效果展示，先看下截图
       当输入密码与确认密码不一致时：

 

       当校验正确时：

由上可知，这个组件可以给出用户输入的密码强度信息，并且可以返回密码与确认密码是正确的信息。
看下这个组件的一些配置信息:

var options = {
passwordInput: '' , // 密码输入框对象的ID
checkInput: '' , // 密码确认框的ID
strengthInfoText: '' , // 密码强度文字显示信息ID
strengthInfoBar: '' , // 密码强度条形信息显示ID
checkInfoText: '' , // 密码校验信息（包括出错信息等）
mustInput: true ,
verdects:[ " 弱 " , " 中 " , " 强 " ], // 密码强度级别
colors:[ " #f00 " , " #ff9933 " , " #3c0 " ], // 不同级别显示的颜色
infoBarBackground: ' Gray ' , // 密码强度条形信息的初始颜色
scores:[ 10 , 25 ], // 通过分数段来区分强度
common:[ " 123456 " , " 12345678 " ], // 一些需要重要提醒为弱密码的密码，
minLength: 6 // 密码的最小长度为6
}

   主要包括如下信息：

1. 对应元素的ID
2. 密码强度判断的一些标准
3. 密码强度的显示样式
4. 需要手动屏蔽的一些特殊密码

组件的实现思路如下：

1. 获取参数，添加一些默认的样式
2. 设计一套密码强度的计算规则
3. 使用规则计算用户的密码强度
4. 根据密码强度绘制不同的表现

组件下载：Jquery密码输入组件.rar

转载于:https://www.cnblogs.com/hello-kitty/archive/2011/04/29/2032900.html