HI!兄弟,你输的密码“缺钙”

技术与开发

最近我看到很多网站的用户注册页面上都有一个密码强度自动提示功能,觉得这个功能很实用,可以为用户带来更好的体验和帮助用户建立高强度的密码。所以我想在自己的网站上添加类似的功能,但不知具体该如何实现?

9-f13-1.jpg
9-f13-2.jpg

这种效果非常实用,大家学会后,可以应用到自己的网站当中。要验证密码强度,自然要划分出密码强度的等级,我们将强度划分为三级,即“弱”,“中等”,“强”。当用户注册或更改密码时,根据输入的数字长短进行检测并返回安全级别的判断,用户就可以根据密码强度的判断来提高账号的安全性。

在用户键入新密码的下面添加一个区域,引入相应的标签,再添加相应的类文件和配置文件即可。本文用Ajax4jsf(Ajax4jsf是一个Rich组件框架,能够为现有JSF页面添加Ajax功能)来实现密码强度显示图片的无刷新更改功能,它支持各种资源管理,能够快速生成图片,还可以不依赖于JavaScript语言,在网站设计中时常被用到。

第一步:修改登录页面

打开开发工具MyEclipse,执行菜单“New”下的“Web Project”命令,导入要实现密码强度的Web项目。打开要设置效果的具体页面,在页面上将登录页面的代码进行修改,修改的关键代码如下(完整代码下载地址:http://www.cpcw.com/bzsoft):

<td width="140" height="27">

<div align="left">

键入新密码:

<td width="180">

<h:inputSecret value="#{check.name}">

<a4j:support action="#{check.checkPass}" event="onblur" reRender="msg" />

</h:inputSecret>

<td height="25">

<div align="left">

密码强度:

<h:inputText value="#{check.strong}" id="msg" binding="#{check.inputText}"/>

<td height="27">

<div align="left">

重新键入密码:

</div>

</td>

<td>

<h:inputText value="#{check.chename}" />

第二步:实现密码强弱判断功能

在第一步中并没有进行“弱”、“中等”、“强”的判断,这是因为具体的提示应该根据用户输入的信息进行判断得出,CheckPass类正好具备这个功能。在工程文件下,新建一个包,命名为Demo,然后在里面新建一个类文件并命名为CheckPass,在其中输入代码(代码下载地址:http://www.cpcw.com/bzsoft)。

第三步:设置配置文件

将工程目录展开,打开工程中WebRoot节点下的WEB-INF节点,用鼠标双击Faces-config.xml,然后将其中的代码替换为如下内容:

<faces-config>

<managed-bean>

<managed-bean-name>check</managed-bean-name>

<managed-bean-class>demo.CheckPass</managed-bean-class>

<managed-bean-scope>request</managed-bean-scope>

</managed-bean>

<managed-bean>

<managed-bean-name>userService</managed-bean-name>

<managed-bean-class>demo.UserManager</managed-bean-class>

<managed-bean-scope>request</managed-bean-scope>

</managed-bean>

</faces-config>

完成上述命令编写后,编译并运行此程序,然后在地址栏中输入http://localhost:8080/ajafor/test.faces,即可得到想要的效果了。

总结

通过本例的学习,读者朋友了解了Ajax4jsf的功能和作用。利用这种技术我们还可以实现各种树形菜单功能。