案例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(参数)]]”;