# 验证码
发送短信或邮箱验证码,并拥有倒计时显示效果。
## 前台代码
![](https://box.kancloud.cn/0d9510722e98b538315eadc32ea89ab1_438x53.png)
```
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" name="username" value="230007112@qq.com" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="bt">发送验证码</button>
</div>
</div>
<script>
require(['hdjs','bootstrap'], function (hdjs) {
let option = {
//按钮
el: '#bt',
//后台链接
url: 'php/validCode.php',
//验证码等待发送时间
timeout: 10,
//表单,手机号或邮箱的INPUT表单
input: '[name="username"]'
};
hdjs.validCode(option);
})
</script>
```
## 后台代码
发送邮件可以使用阿里云的 [https://packagist.org/packages/houdunwang/aliyunsms](https://packagist.org/packages/houdunwang/aliyunsms) 组件或者[https://packagist.org/packages/houdunwang/mail](https://packagist.org/packages/houdunwang/mail) 组件进行后台发送。
**返回数据**
后台服务器返回的信息JSON数据格式如下:
```
<?php
//发送验证码可以使用 composer require houdunwang/aliyunsms 发送短信
//或 composer require houdunwang/mail 发送邮件
$json = json_encode(['code' => 0, 'message' => '发送成功']);
die($json);
```
| 参数 | 说明 |
| --- | --- |
| valid | 1 成功 0 失败 |
| message | 成功或失败的消息内容 |
- 文档已经迁移到后盾人
- 基础知识
- 项目介绍
- 安装配置
- 日期时间
- 日期选择
- 列表框日期
- 日期区间
- 时间选择
- moment
- 上传处理
- 初始配置
- 图片上传
- 文件上传
- 消息通知
- 消息通知
- Bootstrap消息
- izitoast
- SweetAlert
- 模态框
- 表单管理
- 异步请求
- 表单提交
- 表单验证
- 扩展组件
- GET参数
- 剪贴板
- 表情选择
- 图表
- 拾色器
- 二维码生成
- 光标控制
- 数据验证
- md5
- 设备检测
- Loading
- 预览图片
- 图标库
- COOKIE
- 百度地图
- 城市选择
- Vue.js
- jQuery
- axios
- 播放器
- 幻灯片
- 代码高亮
- 阿里云OSS
- 验证码
- 页面滚动
- lodash
- momentjs
- markdownIt
- 元素页面固定
- 编辑器
- ueditor
- editor.md
- SimpleMDE
- simditor
- 自定义组件
- 1.0(旧版)
- 基础知识
- 作者向军
- 安装配置
- 查看效果
- 元素样式
- 日期时间
- 日期选择
- 日期区间
- 时间选择
- moment
- 上传处理
- 图片上传
- 文件上传
- 后台处理
- 模态消息
- 模态
- notify
- bootstrap
- 表单管理
- 表单提交
- 表单验证
- 表单样式
- 扩展组件
- 自定义组件
- get参数
- 剪贴板
- 表情选择
- 图表
- 拾色器
- 二维码生成
- 光标控制
- 数据验证
- MD5
- loading
- 预览图片
- 图标库
- COOKIE
- 百度地图
- 城市选择
- Vuejs
- jQuery
- 播放器
- 幻灯片
- axios
- 代码高亮
- 阿里云OSS
- 验证码
- 正则表达式
- 工具函数
- 编辑器
- 百度编辑器
- markdown
- simplemde-markdow