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

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

  

  类似效果: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="/UploadPic/2007-7/200777164029934.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><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>
运行代码复制代码另存代码

  使用方法:

  第一步:保存图片

  第二步:根据您的需要修改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-10-06 11:31:49

改善用户体验之表单密码强度提示的相关文章

手机UC浏览器表单密码怎么设置

  不少UC浏览器的用户都在问,UC浏览器表单密码怎么设置.这一点很重要,如在操作关于资金的帐户时,请慎用使用"自动保存表单密码"功能,防范支付功能被盗取.今天,小编就来跟大家分享UC浏览器表单密码设置方法. 手机UC浏览器表单密码设置方法 1.首先点击UC浏览器的菜单键,点击设置,再点击系统设置;(如下图所示) 2.在基本设置中往下拉,看到表单保存,点击下拦框,就可以选择你想要设置的类型;(如下图所示) 3.表单保存总有三种方案供选择,一是提示保存,二是自动保存,三是不保存.你可根据

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

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

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

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

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

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

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

PHP防止用户重复提交表单

我们提交表单的时候,不能忽视的一个限制是防止用户重复提交表单,因为有可能用户连续点击了提交按钮或者是攻击者恶意提交数据,那么我们在提交数据后的处理如修改或添加数据到数据库时就会惹上麻烦. 那么如何规避这中重复提交表单的现象出现呢?我们可以从很多方面入手: 首先从前端做限制.前端JavaScript在按钮被点击一次后禁用,即disabled,这个方法简单的防止了多次点击提交按钮,但是缺点是如果用户禁用了javascript脚本则失效. 第二,我们可以在提交后做redirect页面重定向,即提交后跳

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

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

php防止用户重复提交表单_php技巧

我们提交表单的时候,不能忽视的一个限制是防止用户重复提交表单,因为有可能用户连续点击了提交按钮或者是攻击者恶意提交数据,那么我们在提交数据后的处理如修改或添加数据到数据库时就会惹上麻烦. 效果图:   那么如何规避这中重复提交表单的现象出现呢?我们可以从很多方面入手: 首先从前端做限制.前端JavaScript在按钮被点击一次后禁用,即disabled,这个方法简单的防止了多次点击提交按钮,但是缺点是如果用户禁用了javascript脚本则失效. 第二,我们可以在提交后做redirect页面重定

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

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