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