手机号验真
1. 简介
1.1 场景简介
很多情况下需要对手机号的真实性进行校验,以确保收集的手机号真实有效。
本文将通过短信验证的接口及简道云 前端事件 ,为您详细讲解手机号验真案例的设置方法。
1.2 预期效果
以活动报名的场景为例,在表单中输入手机号码后,点击「获取验证码」,对应手机号即可收到包含验证码的短信,只有在「请输入验证码」字段中输入正确的验证码,才能成功提交表单,效果如下:
2. 接口准备
2.1 购买接口
首先我们需要找到一个支持手机短信验证的接口,我们以阿里云官方提供的接口为例,讲解如何在简道云的前端事件中配置:点击进入阿里云市场购买接口。
我们先购买一个 0 元/15 次的体验版本,可以在 云市场 已购买的服务中看到我们刚刚购买的接口。
2.2 接口分析
接下来,点击接口,往下翻到 API 接口的详情介绍,对「短信接口」进行分析。
【调用地址】:http://dfsns.market.alicloudapi.com/data/send_sms 或 https://dfsns.market.alicloudapi.com/data/send_sms
【请求方式】:POST
【返回类型】:JSON
【请求的Headers】:Authorization: APPCODE +英文空格+ 你自己的 APPCODE(服从阿里云云市场的标准鉴权方式)
Authorization:APPCODE AppCode值
【请求body】
名称 | 类型 | 是否必须 | 描述 |
content | STRING | 必选 | code 为短信模板上的参数;1234 为参数值,可自定义传参。当有多个参数(如 TPL_0001 模板),以半角逗号“,”分隔。 |
phone_number | STRING | 必选 | 接受短信的手机号码 |
template_id | STRING | 必选 | 模板 ID:代表整体短信文案模板 |
正常返回示例:
{
"request_id": "TID8bf47ab6eda64476973cc5f5b6ebf57e",
"status": "OK"
}
3. 表单设计
以活动报名的场景为例:
3.1 表单搭建
新建「活动报名表」表单,字段设置如下:
字段名称 | 字段类型 | 字段设置 |
选择报名活动 | 下拉框 | 自定义设置活动名称 |
姓名 | 单行文本 | |
手机号码 | 单行文本 | |
生成默认 CODE | 数字 | |
获取验证码 | 单选按钮组 | 不显示标题,设置选项为:获取验证码 |
请输入验证码 | 单行文本 |
3.2 设置公式
1)选中「生成默认 CODE」字段,在「字段属性 >> 默认值」处,设置默认值为「公式编辑」,点击下方「编辑公式」:
2)在公式编辑页面,设置「生成默认 CODE」字段的公式如下:
INT(RAND()*(9999-1000)+1000)
表示生成随机的 4 位数。
3.3 设置表单校验
1)在「表单属性 >> 表单提交校验」处,点击下方「添加校验条件」:
2)进入提交校验设置页面,设置不满足校验条件时提示文字为:「验证码不一致!」;设置公式如下:
请输入验证码==生成默认CODE
3.4 设置字段显隐规则
1)对于表单中的辅助字段「生成默认CODE」,可以在「字段属性 >> 字段权限」处设置字段为不可见:
2)在「表单属性 >> 不可见字段赋值」处,设置赋值规则为「始终重新计算」:
4. 前端事件设置
4.1 配置入口
添加好了以后,即可在表单属性中配置前端事件:
4.2 设置事件名称&说明
添加好前端事件后,首先设置前端事件的基础信息,即事件名称和事件说明,用于区分前端事件:
4.3 设置触发动作
设置触发动作:触发字段选择「获取验证码」字段。
4.4 设置执行动作
根据【2.2 接口分析】章节,设置执行动作如下:
- 执行动作类型:自定义请求
- 请求类型:POST
- URL设置为:
https://dfsns.market.alicloudapi.com/data/send_sms
Hearder/Body设置:
- Hearder:Authorization=APPCODE+英文空格+自己的 APPCODE
注:可以在 云市场 已购买的服务中看到我们购买的接口,并获取对应的 APPCODE。
- Body:x-www-form-urlencoded
name | value |
content | code:「生成默认CODE」字段 |
phone_number | 「手机号码」字段 |
template_id | TPL_0000 |
注:value 的值从右侧「插入字段」中选择。
全部设置完成记得点击「确定」进行保存。
4.5 设置返回值
此接口不需要设置返回值。
5. 保存与调试
1)按照上述步骤,已完成前端事件的全部设置,接下来点击「保存并调试」,可进入调试,检查配置有无问题。
2)填写手机号码,然后点击底部「发送请求」,即可看到返回内容与正常返回示例一致,即配置成功。