Axure制作:手机号码简单验证

 时间:2024-10-14 10:42:07

1、手机号码验证原理:1.手机号码第一位是12.手机号码第二不是0、1、2、4、63.手机号码都是数字,没有字母

2、新建2个标签,及1个文本框:1.修改1个“标签”内容为:手机号码2.修改1个“标签”内容为:提示布局如图所示:

Axure制作:手机号码简单验证

3、”标签:提示“做个隐藏处理

Axure制作:手机号码简单验证

4、这里主要是对”文本框“做”文本改变时“和”失去焦点时“的动作:

5、“文本改变时”的动作:条件1:---1.“文本框”的字符串的不是数字2.且“文本框”的字符串不是空---如下图所示:

Axure制作:手机号码简单验证

6、动作1:---1.显示”提示:格式错误!“2.”文本框“不能失去焦点,得重新输入正确字符串---

7、”提示“文本可以使用富文本方式,可参考下图设置:

Axure制作:手机号码简单验证Axure制作:手机号码简单验证

8、条件2:---其他状况---动作2:---隐藏”提示“---

9、“失去焦点时”的动作:条件1:---判断”文本框“是否为空---如下图所示:

Axure制作:手机号码简单验证

10、动作1:---显示”提示:请输入手机号码!“---

11、条件2:---如果是以下任何一个条件:1.字符串第一位不是”1“2.字符串第二位不是”3、5、7、8、9“3.字符串长度小于11---如下图所示:

Axure制作:手机号码简单验证

12、其中,配置:字符串第一位不是”1“细节图如下:

Axure制作:手机号码简单验证

13、其中,配置:字符串第二位不是”3、5、7、8、9“细节图如下:

Axure制作:手机号码简单验证

14、动作2:---1.显示”提示:格式错误!“2.”文本框“不能失去焦点,得重新输入正确字符串---

15、所有动作汇总截图如下:

Axure制作:手机号码简单验证

16、动作设置完后,就可以看效果了测试下手机验证是不是很不错~觉得不错的话,请投个票,加个赞哦~

Axure制作:手机号码简单验证
  • AxureRP如何设置元件位置
  • Axure怎么实现页面载入时元素旋转效果
  • 如何利用Axure RP 8设计工具控制图片显示和隐藏
  • 如何设置Axure输入框字数的限制和提示?
  • 如何使用Axure利用中继器实现自增
  • 热门搜索
    word怎么插入表格 苹果手机怎么群发短信 豇怎么读 黑眼圈怎么消除 脸过敏了红肿痒怎么缓解 用工形式怎么填 脚后跟疼怎么办 自热火锅怎么弄 南瓜怎么做好吃又简单 高考怎么查成绩