vue 短信验证
直接贴代码:
HTML
<div class="phone">
<div class="number">
<p class="tip">手机号码<span style="color: #ff0000;">*</span></p>
<input type="number" class="info" :placeholder="question.prompt_content" v-model="phoneObj"/>
</div>
<div class="number">
<p class="tip"> </p>
<input type="number" class="checkPhone" placeholder="请输入验证码" v-model="checkNumberObj"/>
<button :disabled="fetchCodeMsg || false" class="getCheckNumber" :class="{unselected: fetchCodeMsg}" @click="getCheckNumber(question.question_id)">{{timerCodeMsg||'获取验证码'}}</button>
</div>
</div>
CSS
.number{
height: torem(100px);
line-height: torem(100px);
padding-left: torem(20px);
position: relative;
float: left;
width: %;
border-bottom: 1px solid #dddddd;
.unselected{
background-color: #cccccc !important;
}
.tip{
font-size: torem(28px);
color: #000000;
width: torem(260px);
position: relative;
float: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.info{
font-size: torem(28px);
color: #000000;
width: torem(450px);
}
.checkPhone{
width: torem(220px);
font-size: torem(28px);
color: #000000;
padding-right: torem(30px);
}
.getCheckNumber{
width: torem(180px);
height: torem(54px);
color: #ffffff;
background-color: #2E97DD;
font-size: torem(28px);
position: relative;
float: right;
border-radius: torem(6px);
text-align: center;
line-height: torem(54px);
margin-top: torem(24px);
margin-right: torem(30px);
}
}
JS
data(){
return {
phoneObj: '', // phoneOb
timerCodeMsg: '', // timerCodeMsg
fetchCodeMsg: '', // fetchCodeMsg
}
}
getCheckNumber () {
let newPhone = this.phoneObj
if (!(/^[]\d{}$/.test(newPhone))) {
Toast('手机号码有误,请重填')
return false
} else {
this.$root._axios('post', 'CheckCodeApi/sendSmSodeReserve', {phone: newPhone})
.then(res => {
if (res.data.errcode === ) {
let sec =
for (let i = ; i <= ; i++) {
window.setTimeout(() => {
if (sec != ) {
this.timerCodeMsg = sec + '秒后重发'
this.fetchCodeMsg = true
sec--
} else {
sec = // 如果倒计时结束就让 获取验证码显示出来
this.timerCodeMsg = '重新发送'
this.fetchCodeMsg = false
}
}, i * )
}
}
})
}
}
vue 短信验证的更多相关文章
- vue短信验证性能优化写入localstorage中
平时我们在项目中进行注册等的时候,会经常用到短信验证的功能,但是现在现在很多短信验证都是存在下面几个问题,例如短信验证时间为60s的时候, 1. 当点击完按钮时,倒计时还没到60s过完时,刷新浏览器, ...
- Luffy之注册认证(容联云通讯短信验证)
用户的注册认证 前端显示注册页面并调整首页头部和登陆页面的注册按钮的链接. 注册页面Register,主要是通过登录页面进行改成而成. 先构造前端页面 <template> <div ...
- 注册登录页面修订-Python使用redis-手机验证接口-发送短信验证
登录页面修订 views.Login.vue <template> <div class="login box"> <img src="@/ ...
- Mob.com 短信验证的简单使用
1.环境配置 http://wiki.sharesdk.cn/android-短信sdk集成文档/ a.sdk下载 http://www.mob.com/#/downloadDetail/SMS/an ...
- python基于LeanCloud的短信验证
python基于LeanCloud的短信验证 1. 获取LeanCloud的Id.Key 2. 安装Flask框架和Requests库 pip install flask pip install re ...
- thinkphp实现短信验证注册
前言 注册时经常需要用到短信验证码,本文记录一下思路和具体实现. 短信验证平台使用云片,短信验证码的生成使用thinkphp. 思路 1.用户输入手机号,请求获取短信验证码. 2.thinkphp生成 ...
- Mob短信验证的具体使用
原文著作权地址:http://www.jb51.net/article/84946.htm demo地址:http://git.oschina.net/lizhanqi/MobSMSDemo 一.前言 ...
- Mob短信验证的配置的解释
原文地址:http://www.jb51.net/article/84946.htm 关于mob短信验证的解释: mob官方是这样写的: repositories{ flatDir{ dirs 'li ...
- 完整的Android手机短信验证源码
短信验证功能我分两个模块来说,短信验证码的后台和代码实现短信验证码的功能. 一.短信验证码的后台 1.注册Mob账号:http://www.mob.com/#/login 2.注册成功之后, ...
随机推荐
- HBase数据库相关基本知识
HBase数据库相关知识 1. HBase相关概念模型 l 表(table),与关系型数据库一样就是有行和列的表 l 行(row),在表里数据按行存储.行由行键(rowkey)唯一标识,没有数据类 ...
- Java String、StringBuilder、StringBuffer[笔记]
String对象是字符串常量(创建之后不可更改),StringBuilder和StringBuffer对象是字符串变量(可更改),三者主要区别在于执行速度和线程安全. 执行速度 执行速度:String ...
- DBUtils温习1
1.简介 Commons DBUtIls是Apache组织提供的一个开源JDBC工具类库,它是对JDBC的简单封装,学习成本极低,但是使用DBUtils却极大的简化了dao层的开发,少些了很多的jdb ...
- js刷新页面的几种方式与区别
Javascript刷新页面的几种方法:1 history.go(0) 2 location.reload() 3 location=location 4 location.assign(locati ...
- postgreSQL 应用case when的例子
selectname,md5(indvl_id_nbr) as indvl_id_nbr,case when char_length(indvl_id_nbr)=18 or char_length(i ...
- 弱省胡策 Magic
弱省胡策 Magic 求\(n\)个点\(n\)的条边的简单联通图的个数. 毒瘤,还要写高精. 我们枚举环的大小\(k\),\(\displaystyle ans=\sum_{k=3}^nC_n^k ...
- form表单post请求乱码问题
今天做一个查询的小模块遇到了 请求乱码的问题,表单请求方式是post 解决方法是在web.xml 文件中配置一下内容 <!--配置解决post乱码问题filter --> <filt ...
- Rancher2-----了解什么是rancher以及简单部署
个人理解:就是相当于openstack的图形化界面,或者说应用程序的图形化界面,rancher功能就是在图形化界面去管理容器,包括运行容器,创建网络,存储等:rancher有个应用商店,可以根据自己的 ...
- P1171 售货员的难题--搜索(剪枝)
题目背景 数据有更改 题目描述 某乡有nn个村庄(1<n \le 201<n≤20),有一个售货员,他要到各个村庄去售货,各村庄之间的路程s(0<s<1000)s(0<s ...
- Java NIO2:NIO概述
一.概述 从JDK1.4开始,Java提供了一系列改进的输入/输出处理的新特性,被统称为NIO(即New I/O).新增了许多用于处理输入输出的类,这些类都被放在java.nio包及子包下,并且对原j ...