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.效果圖