🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# 验证码 发送短信或邮箱验证码,并拥有倒计时显示效果。 ## 前台代码 ![](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 | 成功或失败的消息内容 |