AxureRP8实战手册-案例50(字符串函数:手机号码验证①)

AxureRP8.0教程 小楼一夜听春语 7772℃ 0评论

案例50. 字符串函数:手机号码验证(1)

案例来源:

360-个人中心-详细资料

 

案例效果:(图4-131)

4-131

案例描述:

原网站中通过点击保存修改按钮触发验证,另外验证结果的提示也有弹出和页面上显示两种;在我们的案例中,我们略作改动,将对手机号码的验证放在光标离开输入框时,验证提示也仅限页面上一种。具体内容如下:

当输入的手机号码格式错误时,显示错误提示;否则,显示正确提示;

正确格式要求:

  • 输入的文字全部为数字;
  • 字符长度为11位;
  • 第1位字符必须为1;
  • 第2位字符不能为0,1,2或6。

 

元件准备:(图4-132)

4-132

包含命名:

  • 文本框(用于输入手机号码):NumberInput
  • 文本标签(用于显示验证结果的提示):MessageLable

 

思路分析:

  • 限制文本框内可输入文字位数最多11位;(操作步骤1)
  • 根据案例描述进行条件判断;(操作步骤2~5)
  • 设置满足全部条件时,给出验证正确的提示;(操作步骤6)
  • 设置不满足必须的条件时,给出验证错误的提示;(操作步骤7)
  • 设置光标进入文本框时,清空验证提示。(操作步骤8)

 

 

操作步骤:

1、在元件“NumberInput”的属性中,设置{最大长度}为“11”;

  • 元件属性设置:(图4-133)

4-133

2、为元件“NumberInput”的【失去焦点时】事件添加“用例1”,设置第1个条件判断为【元件文字】“当前元件”(This)【是】【数字】;这一步为判断输入的字符全部为数字;

  • 条件判断设置:(图4-134)

4-134

3、点击第1个条件后方的“+”按钮,继续添加第2个条件判断【元件文字长度】“当前元件”(This)【==】【值】“11”;这一步为判断输入的字符个数为11位;

  • 条件判断设置:(图4-135)

4-135

4、点击第2个条件后方的“+”按钮,继续添加第3个条件判断【值】“”【==】【值】“1”;这一步为判断首位字符等于1;

  • 条件判断设置:(图4-136)

4-136

5、点击第3个条件后方的“+”按钮,继续添加最后1个条件判断【值】“”【不是】【之一】,点击【自定义选项】,在输入区域不同的行中输入“0”、“1”、“2”和“6”;这一步为判断第2位字符不是“0”、“1”、“2”或“6”四个数字之一;

  • 条件判断设置:(图4-137)

4-137

6、添加满足以上所有条件时,执行的动作,【设置文本】于“MessageLable”为【富文本】,点击【编辑文本】按钮,在弹出的界面中插入FontAwesome图标字体中的“ok ”,并在右侧文字样式中设置为绿色;

  • 用例动作设置:(图4-138)

4-138

7、继续为元件“NumberInput”的【失去焦点时】事件添加“用例2”,设置当未全部满足以上条件时的动作,【设置文本】于“MessageLable”为【富文本】,点击【编辑文本】按钮,在弹出的界面中插入FontAwesome图标字体中的“error ”,并在右侧文字样式中设置为橙色;然后,继续输入文字“手机号码格式有误”,并设置这些文字为灰色;但是,如果文本框未输入内容,也会显示格式错误的提示,为了避免这种情况,我们需要为这个用例再添加一个条件判断【元件文件】“当前元件”【!=】【值】“”(空值);这样,就会在输入了内容并且格式错误时才会给出错误提示。

  • 条件判断设置:(图4-139)

4-139

  • 用例动作设置:(图4-140)

4-140

8、为元件“NumberInput”的【获取焦点时】事件添加“用例1”,设置动作为【设置文本】于“MessageLable”为【值】“”(空值)。

  • 用例动作设置:(图4-141)

4-141

  • 事件交互设置:(图4-142)

4-142

函数说明:

  • This:表示当前元件对象,指事件交互所在的元件;
  • text:获取元件对象上当前的文字,使用方法“[[元件对象.text]]”;
  • charAt(参数):获取文本对象中指定位置的字符,参数为数值,位置从0开始计算,使用方法“[[文本对象.charAt(参数)]]”;

 


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » AxureRP8实战手册-案例50(字符串函数:手机号码验证①)

喜欢 (17)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(13)个小伙伴在吐槽
  1. 请问第6步,在弹出的界面中插入FontAwesome图标字体中正确的图标,如何插入呢?
    kahn1782016-07-18 12:10 回复
  2. 那个正确和错误的图标怎么打出来呀
    blp_rain2016-07-18 17:58 回复
    • 1.下载FontAwesome图标字体,并安装到系统文字里 2.下载FontAwesome元件库 我记得网站里就有,还是打一起打过包的
      我是搬运工2016-07-19 15:01 回复
      • 安装了字体,但是在axure 中找不到该字体 😕 PS中是可以找到的
        木林森2017-04-19 16:06 回复
  3. 和上面同样的问题,字体什么的正常安装了,但是如何插入呢,之前有个帖子是直接复制粘贴,但是也不行,求解答
    kizgel2016-07-19 15:02 回复
  4. 图标就是图标字体元件中的文字,双击把里面的文字复制就行了。注意:不是复制图标字体的元件。是双击元件复制里面的图标文字!!!
    小楼一夜听春语2016-07-19 15:56 回复
    • 你好棒,我纠结这个问题两天了。我从富文本里复制出来看过,是文本段落,而我每次复制的是矩形。所以总是过不去。
      六儿神花露水2016-08-26 17:08 回复
  5. 第五步的“自定义选项”上的数字怎么换行,回车换不了
    临糯米2016-08-18 15:21 回复
    • CTRL+回车
      小楼一夜听春语2016-08-18 16:35 回复
    • shift+回车
      蒋叉叉2016-09-19 17:57 回复
  6. Else if 的那步判断是不是不完整,除了输入空,不符合之前四种情况的也没有提示格式错误
    Ian2016-12-19 15:49 回复
    • 好了,判断符号选错了。。。
      Ian2016-12-19 15:51 回复
  7. :mrgreen:
    jiansir2017-04-12 11:00 回复