vue获取验证码

Posted 2021-02-13 abuya

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 }