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

案例来源:

360-个人中心-详细资料

 

案例效果：（图4-131）

案例描述：

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

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

正确格式要求：

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

 

元件准备：（图4-132）

包含命名：

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

 

思路分析：

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

 

 

操作步骤：

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

• 元件属性设置：（图4-133）

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

• 条件判断设置：（图4-134）

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

• 条件判断设置：（图4-135）

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

• 条件判断设置：（图4-136）

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

• 条件判断设置：（图4-137）

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

• 用例动作设置：（图4-138）

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

• 条件判断设置：（图4-139）

• 用例动作设置：（图4-140）

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

• 用例动作设置：（图4-141）

• 事件交互设置：（图4-142）

函数说明：

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

 

---------------------------------------------------- End ----------------------------------------------------

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

小楼老师倾力打造AxureRP7.0精品课程系列，独特的技术，淫荡的思路，销魂的声音，丰富的姿势，润滑的体验，超爽的感觉，想要？就从下面进入！

《AxureRP7.0从入门到精通》------从零向高手蜕变的必修课------<<想上它，插这里！>>