zoukankan      html  css  js  c++  java
  • 改善用户体验之表单密码强度提示

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>密码</title>
    <style type="text/css">
    body{
    font-size:12px;
    font-family: Arial, Helvetica, sans-serif;
    margin:0;
    }
    form{
    margin:2em;
    }
    #chkResult{margin-left:53px;height:15px;}
    </style>
    </head>
    <body>
    <form name="form1">
    <label for="pwd">用户密码</label>
    <input type="password" name="pwd" onblur="chkpwd(this)" />
    <div id="chkResult"></div>
    <label for="pwd2">重复密码</label>
    <input type="password" name="pwd2" />
    </form>
    <script type="text/javascript">
    function chkpwd(obj){
    var t=obj.value;
    var id=getResult(t);
    //定义对应的消息提示
    var msg=new Array(4);
    msg[0]="密码过短。";
    msg[1]="密码强度差。";
    msg[2]="密码强度良好。";
    msg[3]="密码强度高。";
    var sty=new Array(4);
    sty[0]=-45;
    sty[1]=-30;
    sty[2]=-15;
    sty[3]=0;
    var col=new Array(4);
    col[0]="gray";
    col[1]="red";
    col[2]="#ff6600";
    col[3]="Green";
    //设置显示效果
    var bImg="/web/UploadFiles/200711/20071107173209478.gif";//一张显示用的图片
    var sWidth=300;
    var sHeight=15;
    var Bobj=document.getElementById("chkResult");



    功能说明:在用户注册或更改密码时,根据用户输入进行检测并返回结果。能有效地提醒用户提高帐号的安全性。

      

      类似效果:Live.com中的修改密码功能

      

      运行代码框

      

     使用方法:

      第一步:保存图片

      第二步:根据您的需要修改js文件中该图片地址。如下所示:

    以下是引用片段:
    var bImg="pwdlen.gif";//
    一张显示用的图片


      第三步:在需要检测的页面中引用这个脚本文件,如下所示:

    以下是引用片段:
    <script type="text/javascript" src="chkpwd.js"></script>


      第四步:在网页的表单中,找到密码输入框添加onblur事件驱动,然后添加一个Div,如下所示:

    以下是引用片段:
    <input type="password" name="pwd" onblur="chkpwd(this)" />
    <div id="chkResult">
    强度检测</div>


      第五步:根据您页面的需要通过样式表CSS重新定义#chkResult的摆放位置,以合适您网页的整体布局。













    Bobj.style.fontSize="12px";
    Bobj.style.color=col[id];
    Bobj.style.width=sWidth + "px";
    Bobj.style.height=sHeight + "px";
    Bobj.style.lineHeight=sHeight + "px";
    Bobj.style.background="url(" + bImg + ") no-repeat left " + sty[id] + "px";
    Bobj.style.textIndent="20px";
    Bobj.innerHTML="检测提示:" + msg[id];
    }
    //定义检测函数,返回0/1/2/3分别代表无效/差/一般/强
    function getResult(s){
    if(s.length < 4){
    return 0;
    }
    var ls = 0;
    if (s.match(/[a-z]/ig)){
    ls++;
    }
    if (s.match(/[0-9]/ig)){
    ls++;
    }
    if (s.match(/(.[^a-z0-9])/ig)){
    ls++;
    }
    if (s.length < 6 && ls > 0){
    ls--;
    }
    return ls
    }
    </script>
    </body>
    </html><script language="Javascript">
    var now = new Date();
    document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime()  + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>");
    </script>
    <noscript>
    <img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/>
    </noscript>
  • 相关阅读:
    性能调试工具
    c++11笔记
    根据样式创建内嵌页面
    VMware安装两张网卡
    【赵强老师】使用Oracle的跟踪文件
    【赵强老师】Kafka的消息持久化
    【赵强老师】Kubernetes的探针
    【赵强老师】阿里云大数据ACP认证之阿里大数据产品体系
    【赵强老师】NoSQL数据库之Cassandra基础
    【赵强老师】使用Weblogic的WLST工具
  • 原文地址:https://www.cnblogs.com/liufei88866/p/1052569.html
Copyright © 2011-2022 走看看