码迷,mamicode.com
首页 > 其他好文 > 详细

vue获取验证码

时间:2019-03-18 12:01:20      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:make   span   i++   refresh   slot   length   mount   vue   for   

1.html代码

 1 <Input  v-model="formItem.mobile" clearable placeholder="请输入您的手机号..."></Input>
 2 
 3 <Input  style="width:160px" clearable v-model="formItem.verify" placeholder="请输入验证码"></Input>
 4 
 5 <Button type="ghost" @click="showYz">获取验证码</Button>
 6 
 7 <Modal v-model="modalshow" width="360" loading @on-ok="del">
 8   <div class="code" @click="refreshCode">
 9     <s-identify :identifyCode="identifyCode"></s-identify>
10   </div>
11   <div>
12     <Input icon="" clearable v-model="paras.verify" placeholder="请输入验证码..."></Input>
13   </div>
14   <div slot="footer">
15     <Button type="primary" size="large" @click="del">确定</Button>
16   </div>
17 </Modal>
 
2.methods代码
 1 methods:{
 2   showYz(){
 3     var re=/^((13[0-9])|(14[0-9])|(15[0-9])|(16[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$/; //正则判断手机号格式是否正确
 4     if (re.test(this.formItem.mobile)) {
 5       this.paras.verify = "";
 6       this.modalshow = true; //显示弹窗
 7       this.identifyCode = "";
 8       this.makeCode(this.identifyCodes, 6);
 9     }else {
10       this.$Message.warning("请输入正确的手机号");
11     }
12   },
13   /******验证图片********** */
14   randomNum(min, max) {
15     return Math.floor(Math.random() * (max - min) + min);
16   },
17   refreshCode() {
18     this.identifyCode = "";
19     this.makeCode(this.identifyCodes, 6);
20   },
21   makeCode(o, l) {
22     for (let i = 0; i < l; i++) {
23       this.identifyCode += this.identifyCodes[
24         this.randomNum(0, this.identifyCodes.length)
25       ];
26     }
27   },
28 }
3.mounted代码
1 mounted:{
2   this.makeCode(this.identifyCodes, 6);
3 }

 

 

vue获取验证码

标签:make   span   i++   refresh   slot   length   mount   vue   for   

原文地址:https://www.cnblogs.com/abuya/p/10551192.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!