Axure怎么设计网页强密码验证效果?

Axure制作的密码输入需要验证验证是否包含大写字母，小写字母，数字和特殊符号，但是Axure不支持正则表达式，所以做一些规则上的验证，嵌套很多，下面我们就来分享强密码验证效果的制作方法，请看下文实例教程。

1、强密码验证原理，是判定按键的ASCII码：大写字母，ASCII码范围在65-90小写字母，ASCII码范围在97-122数字，ASCII码范围在48-57特殊字符，ASCII码范围在33-47、58-64、91-96、123-126---**使用ASCII码判定，是为将来验证“连续数字或连续字母”做准备**支持的特殊字符，可按需求选择相应的数值

2、新建4个“空圆”图标，4个“勾选”图标，4个标签及1个文本框：

1）修改4个“标签”内容分别为：大写字母、小写字母、数字、特殊符号

2）命名4个“勾选”图标为：大写、小写、数字、特殊

如图所示：

3、“勾选”图标和“空圆”图标重叠，并隐藏“勾选”图标，具体布局如下：

4、布局完成后，就是针对“文本框”的“文本改变时”做相应的验证动作设置，这里最主要用的到函数就是：charCodeAt(index)，用来获取按键的ASCII码

1）判定大写字母

判断输入的字符，ASCII码是否在65-90的范围内

判断值：[[this.text.charCodeAt(this.text.length-1)]]

动作：显示“图标：大写”，并“置于顶层”

2）判定数字

判断输入的字符，是否为数字

判断值：[[this.text.charAt(this.text.length-1)]]

动作：显示“图标：数字”，并“置于顶层”

3）判定小写字母

判断输入的字符，ASCII码是否在97-122的范围内

判断值：[[this.text.charCodeAt(this.text.length-1)]]

动作：显示“图标：小写”，并“置于顶层”

4）判定特殊符号

**因为特殊符号分属4个范围，为符合条件判定，需要做4个范围的判定，这里仅举例1个做范例，其他可参考补全

判断输入的字符，ASCII码是否在33-47的范围内

判断值：[[this.text.charCodeAt(this.text.length-1)]]

动作：显示“图标：特殊”，并“置于顶层”

5）清除字符串后，重置状态

判断“文本框”输入的字符串长度是否为0

动作：隐藏“图标：大写、图标：数字、图标：小写、图标：特殊”

所有动作汇总截图如下：

动作设置完后，就可以看效果了。输入字符后，判断是否为大写字母、小写字母、数字、特殊符号……

以上就是axure强密码验证效果的制作方法，希望大家喜欢，请继续关注我们。

赞 (0)

相关推荐

  • 怎样设计网页中的字体效果最好

    字体是网站最基本也是最重要的一个元素,选择一个大众化的字体,符合视觉美观的大小,设置恰到好处的颜色其实是一个不能忽视的网站优化要点,以下简单介绍一下怎样设计网页中的字体效果最好,主要从4个要点来说:样 ...

  • axure怎么设计QQ登录界面交互效果?

    axure中想要设计QQ登录界面交互效果的页面原型,该怎么设计呢?下面我们就来看看详细的教程. 1.制作背景动态模板,在动态面板内新建背景图层,设置投影样式 2.制作右上角设置小图标交互样式(以设置小 ...

  • Axure怎么设计网页中拖拽控件上下排序的模块?

    Axure设计网页圆形的时候,想要实现控件拖拽的上下排序,我们可以通过中继器实现,局限性在于仅能往上拖拽排序,往下无法排序,下面我们就来看看详细的教程. 看似一个复杂的效果,实现起来发现也挺简单的,经 ...

  • Axure怎么设计网页的登陆页面?

    Axure是一款功能强大的交互设计软件,作为产品小白入门时的必学软件,从做一个登录界面开始展开我们的学习历程. 这里我用的是Axure RP 8为大家演示如何制作一个登录界面.作为一个学习分享,如果有 ...

  • Axure怎么设计手机短信倒计时效果?

    填写手机号码,发送短信验证码这一功能已经非常普遍了,对原型设计来说,制作出较好的类似动态效果,无论是对开发还是对测试,都会有很大的帮助. 1.首先新建一个动态面板,该动态面板要有两个状态,状态一.状态 ...

  • 怎么利用Axure中的原型工具做出滑动验证效果

    怎么利用Axure中的原型工具做出滑动验证效果

    Axure是一款专业的快速原型设计工具,为广大用户所喜欢,然而,仍然有不少用户对于一些操作不太熟悉,他们问道:怎样利用Axure中的原型工具做出滑动验证效果呢?小编今天给大家分享解决这个问题的方法.具 ...

  • 如何在Axure中制作“网页中的点击关闭按钮后就能隐藏广告”的效果？

    如何在Axure中制作“网页中的点击关闭按钮后就能隐藏广告”的效果？

    相信很多小伙伴都有在使用Axure,在其中如何才能制作"网页中的点击关闭按钮后就能隐藏广告"的效果呢?方法很简单,下面小编就来为大家介绍.具体如下:1. 首先,打开Axure,在其 ...

  • 怎样设计网页

    在网页设计的认识上,许多人似乎仍停留在网页制作的高度上.认为只要用好了网页制作软件,就能搞好网页设计了. 其实网页设计是一个感性思考与理性分析相结合的复杂的过程,它的方向取决于设计的任务,它的实现依赖 ...

  • 如何设置Windows7强密码一个不易被破解的密码

    最近密码安全成为了所有人心中最重要的一件事情：除了在你心目中不同权重的网站和软件使用不同的密码，定期更换密码，不将密码保存在计算机中等方法。如何保护好自己的Windows7/Vista账户，乃至各种网 ...