
微信扫一扫咨询 >
一般检验密码的强度,无非就是能判断数字、大、小写字母及符号,这个功能对开发人员来说很简单,然而在Axure中,默认情况下无非就是使用正则表达式,所以对于密码强度的校验就有一定的难度了。那么怎么在Axure实现密码强度校验功能呢?对此小编进行了分析,感兴趣的小伙伴们一起来了解下。

有读者提出了问题:“校验一下密码的强度?要求能够判断数字、大写字母、小写字母以及符号。”
如果是开发人员来实现此功能非常简单,但是在Axure中,默认情况下是无法使用正则表达式的,所以对于密码强度的校验就变得有些困难,我们先依次来分析每种情况:
诶?等等!!循环???都要用循环了,那前面的分析没就用了呀,直接用循环把每个字符都判断一下不就好啦?
所以……以上文字都不重要了[手动狗头]
为了本篇文章,我还专门写了前置知识文章。如果你还不知道如何在Axure里使用循环,请先参考:《如何在Axure中使用“循环”》
老规矩,我们先看一下演示链接:https://usrsky.axshare.com/#id=thtdwf&g=1
这个演示密码强度校验实现了:
我们先从最最简单的开始一步一步来,准备好以下元件:

首先,我们需要在“校验密码强度”按钮上编写交互事件:

由于很多时候需要使用到Loop里的文本值,所以可着物尽其用的原则,因此我们将尽可能多的交互事件都写在Loop文本框上,分别使用“尺寸改变时、移动时、选中或切换选中时”吧:
Loop的“尺寸改变时”,用来做做循环的判断:

Loop的“移动时”,用来判断每一个字符的类别。其中pwd变量是Password元件的文本:

其中“其它”的判断稍微有点复杂,需要判断好几个区间。(注意右上角:符合任意条件)

Loop的“选中或取消选中时”,用于做最终总结:

这样一个基本的密码强度校验功能就做好啦。
接下来让我们进行一些进阶教程。对于之前实现的功能,还有一些可以优化的方面:
前个都几个好解决,我们将重点介绍如何实现可视化强度展示:
在前面做好的原型基础上,准备一个动态面板,包含5个状态,分别为(空、25%红色、50%橙色、75%蓝色、100%绿色)。

在“校验密码强度”按钮的点击事件中,增加一步用于重置动态面板状态的操作。

顺便将循环逻辑优化一下:

在字符类型的判断上删除全部的区间判断,允许全角符号及双字节文字:

在最终判断时加入对动态面板的改变,这里不需要判断当前状态,直接下一项即可:

最后,预览我们完成的成果。
使用循环可以对密码文本的全部字符进行类型判断,无论在何处增加、修改或删除。为提升用户体验,我们还可以增加一些优化功能,如文本框转换、符号范围限制、最少个数限制等,并且通过可视化强度展示让用户更直观地了解密码强度。