今天分享一个手机号码的简单验证方案~
效果参考下图所示：
工具/原料
- Axure RP 8
方法/步骤
- 1
手机号码验证原理：
1.手机号码第一位是1
2.手机号码第二不是0、1、2、4、6
3.手机号码都是数字，没有字母
- 2
新建2个标签，及1个文本框：
1.修改1个“标签”内容为：手机号码
2.修改1个“标签”内容为：提示
布局如图所示：
- 3
”标签：提示“做个隐藏处理
- 4
这里主要是对”文本框“做”文本改变时“和”失去焦点时“的动作：
- 5
“文本改变时”的动作：
条件1：
---
1.“文本框”的字符串的不是数字
2.且“文本框”的字符串不是空
---
如下图所示：
- 6
动作1：
---
1.显示”提示：格式错误！“
2.”文本框“不能失去焦点，得重新输入正确字符串
---
- 7
”提示“文本可以使用富文本方式，
可参考下图设置：
- 8
条件2：
---
其他状况
---
动作2：
---
隐藏”提示“
---
- 9
“失去焦点时”的动作：
条件1：
---
判断”文本框“是否为空
---
如下图所示：
- 10
动作1：
---
显示”提示：请输入手机号码！“
---
- 11
条件2：
---
如果是以下任何一个条件：
1.字符串第一位不是”1“
2.字符串第二位不是”3、5、7、8、9“
3.字符串长度小于11
---
如下图所示：
- 12
其中，配置：
字符串第一位不是”1“细节图如下：
- 13
其中，配置：
字符串第二位不是”3、5、7、8、9“细节图如下：
- 14
动作2：
---
1.显示”提示：格式错误！“
2.”文本框“不能失去焦点，得重新输入正确字符串
---
- 15
所有动作汇总截图如下：
- 16
动作设置完后，就可以看效果了
测试下手机验证是不是很不错~
觉得不错的话，请投个票，加个赞哦~
END
经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。