Axure怎么实现电话号码的验证的原型?

所属分类: 软件教程 / 其他工具 阅读数: 1565
收藏 0 赞 0 分享

Axure制作原型的登陆验证时,不免要使用到手机、邮箱的验证,没有正则表达式,我们来使用字符串的方式做简单的验证:

一、思路

1、验证长度是否为11位

2、设置输入长度为11位

3、验证输入的值是否为数字

3、截取字符串的前三位判断是否是在已经发布的号码段且在前三位

二、Axure手机号码验证

1、先做一个简易的布局,并对文件进行命名

文本框:phonenum

消息提示:phonemess

2、选中phonenum,进行属性设置:

选择类型为:phonenum(手机号)

提示信息为:请输入手机号

最大长度为:11

3、为文本框(phonenum)添加:文字改变时 交互用例:

4、点击:添加条件, 并选择值选项,选择值以后对输入的文字进行大小判断:

5、插入一个变量,参考下图,并按照第二张图进行设置,

6、然候进行消息提示设置,设置文本为:大于100000000:参考下图:

7、再次添加一个case,并设置文本为:输入值有误;

8、此时进行一次预览,来看效果:

输入:1234567890提示输入有误

输入:12345678901提示大于10000000000

结合我们对输入框限制的输入长度,我们可以确认当前的输入长度为11个

9、下面需要进行:数字和字符串的验证(虽然我们设置了类型为手机号,但用户依然可以输入字符串,且文本框接受输入,所以我们必须进行判断):

编辑:case1,新增条件:此处添加的变量,与第一次添加的变量含义一样,均为phonenum的元件文字

10、以上我们确保了:用户输入的是数字,且长度等于11,下面我们进行字符串的截取判断,判断前三位是否是我们已知的号码段就可以,来看设置:

在case1上继续添加判断,插入变量利用indexof来判断:130 131等号段是否出现在前三位即可,函数:[[(LVAR1.indexOf('130')==0)||(LVAR1.indexOf('131')==0)]],LVAR1的设置参考下图,依然是phonenum的元件文字:

11、截止到此处,我们可以进行再一次的预览,来判断我们输入的号码是否在130 131 号段内:

12、根据第11步的预览,完全正确,那么我们来继续完善其他号段即可:

函数:

[[(LVAR1.indexOf('130')==0)||(LVAR1.indexOf('131')==0)||(LVAR1.indexOf('132')==0)||(LVAR1.indexOf('133')==0)||(LVAR1.indexOf('134')==0)||(LVAR1.indexOf('135')==0)||(LVAR1.indexOf('136')==0)||(LVAR1.indexOf('137')==0)||(LVAR1.indexOf('138')==0)||(LVAR1.indexOf('139')==0)||(LVAR1.indexOf('180')==0)||(LVAR1.indexOf('189')==0)||(LVAR1.indexOf('150')==0)||(LVAR1.indexOf('151')==0)||(LVAR1.indexOf('159')==0)||(LVAR1.indexOf('157')==0)||(LVAR1.indexOf('177')==0)]]

号段判断的不是特别全,您可以自行添加其他号段。

另:将提示信息:大于10000000000,更改成:输入正确

再次预览进行测试:

相关推荐:

Axure绘制好的原型怎么发布和预览?

Axure怎么制作页面滚动时菜单固定在顶部的页面?

windows系统下axure 7.0 无法在发布中预览的解决办法

更多精彩内容其他人还在看

Axure RP 8怎么给下拉列表框添加多个值?

Axure RP 8怎么给下拉列表框添加多个值?Axure RP 8中想要制作一个下拉列表,有多个数值,该怎么制作呢?下面我们就来Axure给下拉列表框添加多行值的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

Axure RP 8怎么制作圆形不断变换透明度的效果?

Axure RP 8怎么制作圆形不断变换透明度的效果?Axure RP 8中想要绘制五个大小不同的圆形,中间的圆形可以控制周围圆形的与透明度,该怎么谁及呢?下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

蓝信沃卡是什么?联想蓝信沃卡资费详情介绍

中国联通占据市场效率非常之快,先后被腾讯大王卡和蚂蚁宝卡刷屏,而如今中国联通开启了全新的重大举措,与企业移动办公平台蓝信合作推出“蓝信沃卡”抢占企业用户市场。那么联通蓝信沃卡是什么?蓝信沃卡资费是怎么样的呢?本文将提供联想蓝信沃卡资费详情介绍
收藏 0 赞 0 分享

微信小程序可以分享到朋友圈吗 微信小程序支不支持分享朋友圈

微信小程序可以分享到朋友圈吗?很多朋友都在咨询微信小程序支不支持分享朋友圈,那么微信小程序可以分享到朋友圈吗,接下来小编给大家介绍究竟微信小程序支不支持分享朋友圈
收藏 0 赞 0 分享

Axure RP 8怎么利用按钮控制单选框和复选框?

Axure RP 8怎么利用按钮控制单选框和复选框?Axure中想要设计一个通过按钮来空值单选框和复选框的原型,该怎么制作呢?下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

Axure RP 8设怎么绘制拱桥倒影图?

Axure RP 8设怎么绘制拱桥倒影图?想要制作一个圆拱桥并且设置倒影相互映衬,该怎么绘制呢?下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

超牛卡是什么卡?电信超牛卡套餐资费详情介绍

中国联通和腾讯、支付宝联合相继推出了腾讯王卡和蚂蚁宝卡,这些优惠专属卡引起了移动和电信的高度重视,而最近发现电信推出的“超牛卡”,资费还是很划算的。那么超牛卡是什么卡?超牛卡有什么套餐资费?下面脚本之家的小编带来超牛卡套餐资费详情介绍,一起来了解下吧
收藏 0 赞 0 分享

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

Axure怎么设计网页的登陆页面?Axure中想要设计一个网页的登陆界面,输入用户名密码,该怎么设置呢?下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

微信小程序怎么申请注册 微信小程序官方注册图文流程

微信小程序怎么申请注册?2017年1月9日,微信小程序正式与大家见面。有部分朋友不清楚怎么申请注册,接下来小编给大家带来微信小程序官方注册流程,需要的朋友可以参考下
收藏 0 赞 0 分享

微信小程序登录入口在哪? 如何发现新的小程序?

微信小程序在哪里登录?如何发现新的小程序?微信小程序于今日正式上线,用户先需要将将微信更新至iOS6.5.3版本或Android6.5.3版本。之后可通过手动搜索小程序、扫描二维码等方式激活,那么微信小程序怎么登陆呢?又怎么发现更多的小程序
收藏 0 赞 0 分享
查看更多