vue获取验证码

1.html代码

<Input  v-model="formItem.mobile" clearable placeholder="请输入您的手机号..."></Input>

<Input  style="160px" clearable v-model="formItem.verify" placeholder="请输入验证码"></Input>

<Button type="ghost" @click="showYz">获取验证码</Button>

<Modal v-model="modalshow" width="360" loading @on-ok="del">
　　<div class="code" @click="refreshCode">
　　　　<s-identify :identifyCode="identifyCode"></s-identify>
　　</div>
　　<div>
　　　　<Input icon="" clearable v-model="paras.verify" placeholder="请输入验证码..."></Input>
　　</div>
　　<div slot="footer">
　　　　<Button type="primary" size="large" @click="del">确定</Button>
　　</div>
</Modal>

 

2.methods代码

methods：{
　　showYz（）{
　　　　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}$/; //正则判断手机号格式是否正确
　　　　if (re.test(this.formItem.mobile)) {
　　　　　　this.paras.verify = "";
　　　　　　this.modalshow = true; //显示弹窗
　　　　　　this.identifyCode = "";
　　　　　　this.makeCode(this.identifyCodes, 6);
　　　　}else {
　　　　　　this.$Message.warning("请输入正确的手机号");
　　　　}
　　},
　　/******验证图片********** */
　　randomNum(min, max) {
　　　　return Math.floor(Math.random() * (max - min) + min);
　　},
　　refreshCode() {
　　　　this.identifyCode = "";
　　　　this.makeCode(this.identifyCodes, 6);
　　},
　　makeCode(o, l) {
　　　　for (let i = 0; i < l; i++) {
　　　　　　this.identifyCode += this.identifyCodes[
　　　　　　　　this.randomNum(0, this.identifyCodes.length)
　　　　　　];
　　　　}
　　},
}

3.mounted代码

mounted:{
　　this.makeCode(this.identifyCodes, 6);
}