vue 项目,获取手机验证码和图形验证码(iviewUI框架)

1.编辑获取验证码模块

　　　　<Form ref="phoneFormItem" :model="phoneFormItem" :label-width="100" :rules="ruleValidate3" label-position="left" style="margin-left: 60px;" v-show="comfort">
                    <FormItem label="新手机号码" prop="phone">
                        <Input v-model="phoneFormItem.phone" placeholder="请输入登录密码" style="width: 200px;"></Input>
                    </FormItem>
                    <FormItem label="图形验证码" prop="imgCode">
                        <Input v-model="phoneFormItem.imgCode" placeholder="请输入登录密码" style="width: 200px;"></Input>
                        
                        <div class="divIdentifyingCode" @click="getIdentifyingCode(true)">
                            <img id="imgIdentifyingCode" style="height:33px; width: 100px; cursor: pointer;" alt="点击更换" title="点击更换" />
                        </div>
                    </FormItem>
                    <FormItem label="手机验证码" prop="code">
                        <Input v-model="phoneFormItem.code" placeholder="请输入登录密码" style="width: 200px;"></Input>
                        <span class="phoneCode" v-show="show" @click="getCode" style="cursor: pointer;">获取验证码</span>
                        <span class="phoneCode" v-show="!show">{{count}} s</span>
                    </FormItem>
                </Form>

 

 

 

2.在data return添加默认值

3.添加限制规则

 

4.获取手机验证码代码

 

 

 

/**
         * 获取手机验证码
         */
        getCode(){
            if(this.phoneFormItem.phone != \'\' ){ // 1.首先判断是否未输入手机号码就点击获取验证码
                if(/^1[34578]\d{9}$/.test(this.phoneFormItem.phone)){ //2.使用正则判断手机输入的验证码是否符合规范
                    const TIME_COUNT = 60; // 3.设置时间为60s
                    if (!this.timer) {
                        this.count = TIME_COUNT;
                        this.show = false; // 4.隐藏获取验证码按钮,展示倒计时模块
                        this.getPhoneCode() // 5.调用后端获取验证码接口的函数
                        this.timer = setInterval(() => {
                            if (this.count > 0 && this.count <= TIME_COUNT) { // 6.设置每秒钟递减
                                this.count--;
                            } else { // 7.递减至0时,显示获取验证码按钮,隐藏倒计时模块,清除定时器this.timer,并将其置为null
                                this.show = true;
                                clearInterval(this.timer);
                                this.timer = null;
                            }
                    }, 1000)}
                } else {
                    this.$Message.error(\'手机号格式不正确!\');
                }
            } else {
                this.$Message.error(\'请先填写手机号码!\');
            }
        },
        getPhoneCode(){
            let phoneParam ={
                phone:this.phoneFormItem.phone,
                type:0
            }
            this.$api.SendPhoneCode(phoneParam).then(res =>{
                if (res.code == 200) {
                    
                }
            })
        },

 

 5.获取图形验证码

 

 6.效果图