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

  发布时间:2016-03-30 10:00:25   作者:佚名   我要评论
Axure怎么实现电话号码的验证的原型?很多网站都会用电话号码来什么账号,但是怎么才能判断别人输入的电话号码正不正确呢?下面我们来看看Axure电话号码的验证的教程,需要的朋友可以参考下

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 Pro 7.0怎么制作图片轮播按钮效果?

    Axure RP Pro 7.0怎么制作图片轮播按钮效果?经常看到网页上有轮播图在首页,我们该怎么做呢?下面我们来看看Axure轮播图按钮的原型图的制作方法,需要的朋友可以参考下
    2016-03-27
  • Axure绘制好的原型怎么发布和预览?

    Axure绘制好的原型怎么发布和预览?经常使用Axure绘制网页原型,但是绘制好以后需要发布出来才能看到实际效果,Axure原型怎么发布和预览呢?请看下文详细教程
    2016-03-23
  • axure怎么上传自己下载好的元件库/控件库?

    axure怎么上传自己下载好的元件库/控件库?axure中自带的控件库样式少,想自己添加一些,于是从上下载了一些元件库,但是下载好以后不知道怎么添加到axure中,怎么办n呢?
    2016-03-23
  • Axure8怎么实现简易的百分比进度条?

    Axure8怎么实现简易的百分比进度条?经常看到加载数据的时候会出现进度条,今天我们就来教大家Axure8中绘制进度条的教程,很简单,需要的朋友可以参考下
    2016-03-23
  • Axure8怎么使用动态面板?Axure8的使用教程

    Axure8怎么使用动态面板?经常使用Axure绘制原型,Axure动态面板是最常使用的,今天我们就来详细介绍一下Axure8的使用教程,很详细,需要的朋友可以参考下
    2016-03-22
  • axure怎么绘制APP菜单阻尼滑动的原型图?

    axure怎么绘制APP菜单阻尼滑动的原型图?想要制作手机app,可以再axure中先将自己的构思画出来,今天我们就来看看axure中绘制APP菜单阻尼滑动的原型图的方法,需要的朋友可
    2016-03-18
  • windows系统下axure 7.0 无法在发布中预览的解决办法

    axure 7.0 无法在发布中预览该怎么办?我们在使用axure7.0绘制原型的时候,想预览一下功能能不能实现,但是在预览的时候发现不能预览,该怎么办呢?请看下文详细介绍
    2016-02-29
  • axure怎么做滑动效果? axure做手机触摸屏幕滑动效果的方法

    axure怎么做滑动效果?在axure中画原型图的时候,想在原型图中加上效果,制作手机滑动屏幕的滑动效果该怎么做呢?下面分享axure做手机触摸屏幕滑动效果的方法,需要的朋友
    2016-02-19
  • Axure RP Pro 7.0怎么制作图片轮播按钮控制效果?

    Axure RP Pro 7.0怎么制作图片轮播按钮控制效果?很多网页中都有一个图片轮播的功能,特别是娱乐和美食,有了图片轮播是最吸引人眼球的,今天我们就教大家使用Axure实现这
    2016-01-08
  • Axure怎么给菜单设置旋转效果?

    Axure怎么给菜单设置旋转效果?使用Axure绘制原型图的时候,想给菜单做一些特效,这样更吸引人,该怎么设置菜单旋转时变大的效果呢?请看下文详细的设置教程,需要的朋友可
    2015-12-18

最新评论