改善用户体验 制作实用密码强度提示

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

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

  运行代码框

  简单预览

<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="http://www.alixixi.com/UploadPic/2007-7/200777163934640.gif";//一张显示用的图片
  var sWidth=300;
  var sHeight=15;
  var Bobj=document.getElementById("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>

  使用方法:

  第一步:保存图片

  第二步:根据您的需要修改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的摆放位置,以合适您网页的整体布局。

时间: 2024-12-31 02:08:21

改善用户体验 制作实用密码强度提示的相关文章

3个可以改善用户体验的AngularJS指令介绍

  这篇文章主要介绍了3个可以改善用户体验的AngularJS指令,AngularJS是一款具有很高人气的JavaScript框架,需要的朋友可以参考下 1.头像图片 为了在你的应用中展示头像图片,你需要使用用户的电子邮件地址,将地址转换为小写并使用md5加密该字符串.所以聪明的做法是使用指令来做到这些,并且可以复用. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29   /* * A

为了改善用户体验,知乎应该重新审视

"知乎是不是已经变成了论坛?","知乎和百度知道现在有什么区别?","知乎与李毅吧之间的本质区别是什么?",在现在定位为"高端社交问答社区"的zhihu.com出现这样的新手提问,总会让那些资深用户有一种受到了冒犯的感觉,而他们的回答往往也会带上一丝不屑和鄙视:"这样的问题要是再多一些,那两者就真的没区别了." 实际上,两者之间至少有一个明显的区别,那就是在知乎指南中说明的:"知乎有些地方其实很像

改善用户体验的 3 个 AngularJS 指令 【已翻译100%】

AngularJS指令可以为给你的访问者提供更好的用户体验,比如通过展示用户头像来使页面看起来更具个性化.在你的注册表单中,可以在电子邮箱地址一栏的旁边展示一个头像,指示用户输入的是否是一个正确的邮件地址.如果在你的表单中有可选输入项,你可以默认隐藏它们,当用户点击时再展示出来,并且立刻自动将焦点对准第一个输入框.这些方法非常容易实现,并且可以通过指令来获得复用. 你有许多方式来构建AngularJS指令.关于如果创建用户指令已经有非常多的教程和指导(所以我不打算在此描述一些基本的东西): An

后台产品交互设计:了解用户目标改善用户体验

文章描述:更贴近业务及用户--交互设计工作方式转变感言. 引子: 年初时交互设计师与产品经理座谈,议题关于交互设计师应从哪个工作环节切入更能发挥其自身价值.结论是交互随产品经理参与到项目初期需求挖掘阶段,更早的参与了解业务需求及用户需求,与产品经理共同产出PRD(带有用户体验的高保真原型部分由交互设计师着力产出,原型好处:方便用户参与可用性测试.整个产品团队更直观地把握设计要求,优势是显而易见的).取而代之目前项目正式启动,产品经理产出详细的PRD后,交互设计师再参与到项目里参与原型设计,有点迟

oelove v3.X 重点改善用户体验及优化技术底层

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 oelove v3.X 重点改善用户体验及优化技术底层等方面. 许多用户一直在问,oelove新版本v3到底出增加了什么功能,首先感谢这些一直关注我们成长的站长朋友们,你们的关注是我们发展的动力.在oelove v2.X使用中,许多站长通过线下与线上的方式结合取得了良好的效果,部份有经验的站长并己有开始盈利.更多的地方站长的运营方式较单一更需

改善用户体验的五款jQuery插件分享_jquery

1.菜单栏 清爽美观的菜单栏既能够向用户提供充分的吸引人的内容,又能让网站得体大方. Cool Animated Menu 演示|下载 2. tab 一个非常cool的tab既能够节省空间又能第一时间吸引用户眼球,这是提高用户体验的重要手段. Feature List 演示|下载 3. 登录/注册 登录/注册机制是巩固老用户和吸引新用户的重要方式,人性化的登录/注册机制才能为网站带来越来越多的用户.登录/注册机制要注意细节,最好把登录和注册放在一起,操作要便捷高效. A Cool Login S

SNS网站运营秘籍:注重前期引导改善用户体验

中介交易 SEO诊断 淘宝客 云主机 技术大厅 随着SNS的普及,UCenter Home(SNS)像Discuz!(BBS)一样成为网络社区建站的标配.为了更好的让更多的网络社区用好UCenter Home,我们特别准备UCenter Home(SNS)建站"运营秘籍"系列专题,把很多UCenter Home(SNS)实战应用的小技巧,与广大站长朋友们一起分享,愿UCenter Home和广大站长朋友一起成长. 注重前期引导,改善用户体验 一.邀请好友登陆页设置: 前段时间有朋友向我

天气通发布全新版本 改善用户体验

作为业内起步最早的天气应用,天气通始终改善用户体验,并把功能创新作为一种特色坚持至今.近日天气通同时发布了AndroidV2.4版和iPhoneV2.0版,又一次开创了天气应用的全新表现方式.天气通的老用户可能对去年8月新增的"天气随手拍"功能记忆犹新,通过用户拍摄照片即可让其他用户直观的看到天气情况,淡化了天气资讯一贯的数据罗列,是一次很大胆的尝试.新版本中"天气随手拍"功能已华丽变身为"实景天气",优化后的入口位于首页,用户可以一键进入,看照

改善用户体验之表单密码强度提示

功能说明:在用户注册或更改密码时,根据用户输入进行检测并返回结果.能有效地提醒用户提高帐号的安全性. 类似效果:Live.com中的修改密码功能 运行代码框 <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>密码</title><style type="text/cs