zoukankan      html  css  js  c++  java
  • Js判断密码强度并显示提示信息

    用javascipt实现的Ajax判断密码强弱的功能,大多数有用户注册功能的网站,都会有这么一个功能,作为WEB程序员,应该会写这种小模块哦,不懂的就看下这个例子,觉得挺简单,当初帮助了不少人学会了密码强度的检测。

    表单部分,用来显示密码框和密码强度提示信息:

    <form name=form1 action="" >
    请设置密码:<input type="password" size="10" onKeyUp="pwStrength(this.value)" onBlur="pwStrength(this.value)">
    <br>密码强度提示:
    <table width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc" height="23" style='display:inline'>
    <tr align="center" bgcolor="#eeeeee">
    <td width="33%" id="strength_L"></td>
    <td width="33%" id="strength_M"></td>
    <td width="33%" id="strength_H"></td>
    </tr>
    </table>
    </form>

    JavaScript部分,比较主要,在此判断密码强度,这里一共用了四个自定义函数分别实现密码字符串的类型判断、模式统计、返回密码强度级别、根据密码框失去焦点来显示不同的颜色,以警示密码强度值,具体代码:

    <script language=javascript>
    //字符类别判断
    function CharMode(iN){
    if (iN>=48 && iN <=57) //数字
    return 1;
    if (iN>=65 && iN <=90) //大写字母
    return 2;
    if (iN>=97 && iN <=122) //小写字母
    return 4;
    else
    return 8; //特殊字符
    }
    
    //bitTotal函数
    //计算当前密码中有多少种模式
    function bitTotal(num){
    modes=0;
    for (i=0;i<4;i++){
    if (num & 1) modes++;
    num>>>=1;
    }
    return modes;
    }
    
    //checkStrong函数
    //返回密码强度级别
    function checkStrong(sPW){
    if (sPW.length<=4)
    return 0; //密码太短
    Modes=0;
    for (i=0;i<sPW.length;i++){
    //测试每一个字符类别并统计有多少种模式.
    Modes|=CharMode(sPW.charCodeAt(i));
    }
    return bitTotal(Modes);
    }
    
    //pwStrength函数
    //当密码框失去焦点时,根据不同级别显示不同颜色
    function pwStrength(pwd){
    O_color="#eeeeee";
    L_color="#FF0000";
    M_color="#FF9900";
    H_color="#33CC00";
    if (pwd==null||pwd==''){
    Lcolor=Mcolor=Hcolor=O_color;
    }
    else{
    S_level=checkStrong(pwd);
    switch(S_level) {
    case 0:
    Lcolor=Mcolor=Hcolor=O_color;
    case 1:
    Lcolor=L_color;
    Mcolor=Hcolor=O_color;
    break;
    case 2:
    Lcolor=Mcolor=M_color;
    Hcolor=O_color;
    break;
    default:
    Lcolor=Mcolor=Hcolor=H_color;
    }
    }
    document.getElementById("strength_L").style.background=Lcolor;
    document.getElementById("strength_M").style.background=Mcolor;
    document.getElementById("strength_H").style.background=Hcolor;
    return;
    }
    </script>
  • 相关阅读:
    跨浏览器 JavaScript判断窗口是否最小化
    .net 5 获取用户真实IP(nginx)
    C# EF 字符串模糊查询完整实例 lambda
    (zt)过程生成
    (zt)IOS开发常用的开源类库和一些示例
    wp7 生命周期及多任务 详解
    Js中concat()与push()的区别
    Ruby中p、print和puts的区别
    jquery Bug:当表单中包含name为nodeType的input时jquery选择器失效的bug 与您分享我的快乐
    Openlaszlo学习(一)Demo "Applying Constraints"的修改 与您分享我的快乐
  • 原文地址:https://www.cnblogs.com/phpfensi/p/4333870.html
Copyright © 2011-2022 走看看