手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

Axure原型工作制作输入框验证手机号效果

时间:2024-10-13 04:36:41

1、打开Axure原型工具,创建一个空白页面,在工作区域内拖入输入框、矩形等元件元素,如下图所示。

Axure原型工作制作输入框验证手机号效果

2、对元件的样式做一些调整,并将各个元件的名字命名,如下图所示。

Axure原型工作制作输入框验证手机号效果
Axure原型工作制作输入框验证手机号效果

3、元件的样式设置完成后,开始对文本输入框的交互事件进行设置,首先是获取焦点时的交互事件,如下图所示。

Axure原型工作制作输入框验证手机号效果

4、然后对输入框的失去焦点时的交互事件进行设置,这里会用到条件的判断,如下图所示。

Axure原型工作制作输入框验证手机号效果

5、失去焦点时的交互事件需要做两个事件,case1和case2,如下图所示。

Axure原型工作制作输入框验证手机号效果

6、所有工作准备完成,f5预览一下效果,如下图所示,输入非数字的时候,后面会弹出对应的提示信息。

Axure原型工作制作输入框验证手机号效果

7、当输入的数字大于11位的时候,后面也会提示手机号输入错误,如下图所示。

Axure原型工作制作输入框验证手机号效果

8、当输入的是数字,且是11位的手机号时,此张虢咆噘时后面的提示会提示正确。这些提示的文字在上面做交互事件的时候可以自己修改,想提示什么都可以,而且可以加颜色加图标,这个自己去摸索吧。

Axure原型工作制作输入框验证手机号效果
© 手抄报圈