vue 中添加手机验证码组件

来源:http://www.prospettivedarte.com 作者:计算机教程 人气:137 发布时间:2019-05-10
摘要:写在前面: 今天要实现的功能是在完善个人信息页面(vue)中添加手机验证码组件,当用户点击手机选项时,弹出获取验证码组件,完成验证手机的功能: 这里考虑到功能的复用,我

写在前面: 今天要实现的功能是在 完善个人信息页面(vue)中添加手机验证码组件,当用户点击 手机选项时,弹出获取验证码组件,完成验证手机的功能:皇牌天下投注网 1皇牌天下投注网 2

这里考虑到功能的复用,我把当前弹出手机验证码的操作放在了单独的组件中:

 1 <template >
 2     <div>
 3         <div class="bind-phone-box">
 4             <div class="phone-title">绑定手机</div>
 5             <div class="phone-content" v-on:click.stop="fillContent">
 6                 <input v-model="phoneNum" class="phone-num" type="text" placeholder="请输入手机号码">
 7                 <div class="verify-box clearfix">
 8                     <input class="verify-num" v-model="verifyNum" type="text" placeholder="请输入验证码"><input v-on:click="sendSmsCode" class="verify-btn" type="button" v-model="btnContent" v-bind="{'disabled':disabled}">
 9                 </div>
10             </div>
11             <div class="phone-submit clearfix">
12                 <input class="submit-cancel" type="button" value="取消">
13                 <input class="submit-confirm" v-on:click.stop="verificationCode" type="button" value="确定">
14             </div>
15         </div>
16     </div>
17 </template>

并把当前组件放在需要使用它的组件中,这里需要注意的是,在控制 绑定手机组件的显示和隐藏的时候,出现了一个小问题:点击 “手机” 按钮需要显示当前组件,但什么时候去隐藏当前的组件呢,我是这样想的:

皇牌天下投注网,  情况1:用户已经输完了手机号并通过了验证,点击"确定"按钮的时候需要隐藏当前组件;

  情况2:用户没有完成手机验证,但又不想继续,点击当前手机的任意位置(除去“确定”按钮、手机号输入框和 验证码输入框)都应该隐藏当前组件;

基于这两种情况,我在父组件中给子组件添加了一个容器:

1     <li class="mui-table-view-cell phone-li">
2       手机号*
3       <!-- 手机验证码 -->
4         <div class="shade" v-show="verifyShow" v-on:click="verifyPhone">
5              <!-- 手机验证码子组件 -->
6               <phoneVerify></phoneVerify>
7          </div>
8   </li>

通过控制 父div 的显示状态来控制子组件的显示状态,

1     methods:{
2        // 手机号验证
3        verifyPhone(){
4           this.verifyShow=!this.verifyShow;
5        },
6    },

在验证组件中的逻辑控制如下:

  

 1 <script>
 2     // 引入弹窗组件
 3     import { Toast } from 'mint-ui';
 4     export default {
 5         data(){
 6             return {
 7                 phoneNum:"", //手机号
 8                 verifyNum:"", //验证码
 9                 btnContent:"获取验证码", //获取验证码按钮内文字
10                 time:0, //发送验证码间隔时间
11                 disabled:false //按钮状态
12             }
13         },
14         created(){
15 
16         },
17         methods:{
18             // 获取验证码
19             sendSmsCode(){
20                 var reg=11&& /^((13|14|15|17|18)[0-9]{1}d{8})$/;//手机号正则验证
21                 var phoneNum = this.phoneNum;
22                 if(!phoneNum){//未输入手机号
23                     Toast("请输入手机号码");
24                     return;
25                 }
26                 if(!reg.test(phoneNum)){//手机号不合法
27                     Toast("您输入的手机号码不合法,请重新输入");
28                 }
29                 this.time = 60;
30                 this.timer();
31 
32                 // 获取验证码请求
33                 var url = 'http://bosstan.asuscomm.com/api/common/sendSmsCode';
34                 this.$http.post(url,{username:phoneNum},{emulateJSON:true}).then((response)=>{
35                     console.log(response.body);
36                 });
37 
38             },
39             timer(){
40                 if(this.time>0){
41                     this.time--;
42                     this.btnContent = this.time "s后重新获取";
43                     this.disabled = true;
44                     var timer = setTimeout(this.timer,1000);
45                 }else if(this.time == 0){
46                     this.btnContent = "获取验证码";
47                     clearTimeout(timer);
48                     this.disabled = false;
49                 }
50             },
51             // 验证验证码
52             verificationCode(){
53                 var phoneNum = this.phoneNum;//手机号
54                 var verifyNum = this.verifyNum;//验证码
55 
56                 var  url = 'http://bosstan.asuscomm.com/api/common/verificationCode';
57                 this.$http.post(url,{
58                     username:phoneNum,
59                     code:verifyNum
60                 },{
61                     emulateJSON:true
62                 }).then((response)=>{
63                     console.log(response.body);
64                 });
65             },
66             fillContent(){
67                 // console.log("fillContent");
68             }
69         }
70     }
71 </script>

其中,获取验证码和验证短信验证码的逻辑还没有写入

  

本文由皇牌天下投注网发布于计算机教程,转载请注明出处:vue 中添加手机验证码组件

关键词:

上一篇:Ubuntu安装pycharm并且激活

下一篇:没有了

最火资讯