uniapp---获取验证码
<view class="apply-form"> <view class="apply-lt"> 手机号 </view> <view class="apply-phone"> <input type="text" :value="info.telephone" name="telephone" placeholder="请输入手机号" placeholder-style="color:#bebebe" @input="formphone" maxlength="11" /> </view>
</view> <view class="apply-form"> <view class="apply-lt"> 验证码 </view> <view class="apply-code"> <input type="number" value="" name="sms_code" placeholder="请输入验证码" placeholder-style="color:#bebebe" maxlength="6" /> <view class="apply-code-btn"> <button type="default" v-if="getCode" @tap="sendMobileCode">获取</button> <button style="color: #969696;background-color: #eee;" type="default acv-code-btn" v-else disabled="true">{{ sec + 's' }}</button> </view> </view> </view>
<script> var tools = require('utils/tools.js'); export default { data() { return { // 验证码 sec: '60', getCode: true, mobileNum:'' } }, methods: { // 获取手机号 formphone(e) { this.mobileNum = e.detail.value; console.log(this.mobileNum) }, //发送短信验证码 sendMobileCode() { var mobileNum = this.mobileNum; if (mobileNum.length == 0) { uni.showToast({ title: '请输入手机号', icon: 'none' }); return; } var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/; if (!myreg.test(mobileNum) || mobileNum.length !== 11) { uni.showToast({ title: '请输入正确格式的手机号', icon: 'none' }); return; } tools.ajax.post( '', { mobile: mobileNum, }, (err, res) => { if (err) { uni.showToast({ title: '接口异常', icon: 'none' }); return; } if (res.data.code == 1) { uni.showToast({ title: res.data.msg }); this.get_code_time(); } else { uni.showToast({ title: res.data.msg, icon: 'none' }); } } ); }, // 发送短信验证码60秒倒计时 get_code_time() { this.getCode = false; this.get_code_interval = setInterval(() => { --this.sec; }, 1000); setTimeout(() => { clearInterval(this.get_code_interval); this.getCode = true; this.sec = '60'; }, 60000); }, }, } </script>
.apply-form {
display: flex;
justify-content: space-between;
width: calc(100% - 60rpx);
margin: auto;
padding: 25rpx 30rpx;
border-bottom: solid 0.5px #dfdfdf;
align-items: center;
}
.apply-lt {
font-size: 30rpx;
}
.apply-phone input {
text-align: right;
color: #333333;
font-size: 30rpx;
}
.apply-code {
display: flex;
justify-content: flex-end;
align-items: center;
}
.apply-code input {
text-align: right;
color: #333333;
font-size: 30rpx;
margin-right: 30rpx;
}
.apply-code-btn button {
width: 120rpx;
height: 60rpx;
line-height: 60rpx;
background: #FF7E30;
color: #FFFFFF;
font-size: 24rpx;
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 提示词工程——AI应用必不可少的技术
· 地球OL攻略 —— 某应届生求职总结
· 字符编码:从基础到乱码解决
· SpringCloud带你走进微服务的世界