html：

<el-form :model="emailForm" :rules="rules" class="elform">
          <el-form-item label="輸入郵箱：" label-width="120px" prop="email">
            <el-input class="wjinputone" v-model="emailForm.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="驗證碼：" label-width="120px" class="el-formtwo" prop="codes">
            <el-input class="wjinput" v-model="emailForm.codes" autocomplete="off"></el-input>
            <el-button type="primary" @click="getCode" :disabled="codedisObj.codeDisabled">{{codedisObj.codeMsg}}</el-button>
         </el-form-item>
</el-form>

js：

 1 private codedisObj: any = {
 2     codeDisabled: true,
 3     codeMsg: "獲取簡訊驗證碼",
 4   };
 5  private timer: any = null;
 6  private countdown: number = 60;
 7  //忘記密碼中校驗郵箱
 8   private validateEmail: any = (rule, value, callback) => {
 9     if (value == "") {
10       callback(new Error("請輸入郵箱"));
 
11     } else {
12       if (value != "") {
13         var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
14         if (!reg.test(value)) {
15           callback(new Error("郵箱格式輸入錯誤"));
16           this.codedisObj.codeDisabled = true;
17         } else {
18           //手機號碼輸入正確時才可點選獲取驗證碼按鈕
19
 
           this.codedisObj.codeDisabled = false;
20         }
21       }
22       callback();
23     }
24   };
25 private rules: object = {
26  codes: [
27       {
28         required: true,
29         message: "請輸入驗證碼",
30         trigger: "blur",
31       },
32       {
33         pattern: /^[^\s]*$/,
34         message: "不能輸入空格",
35         trigger: "change",
36       },
37       {
38         min: 1,
39         max: 6,
40         message: "請校對驗證碼的值是否填寫正確",
41         trigger: "blur",
42       },
43       {
44         pattern: /^\d+$|^\d+[.]?\d+$/,
45         message: "驗證碼只能輸入純數字",
46         trigger: "blur",
47       },
48     ],
49  email: [
50       {
51         required: true,
52         validator: this.validateEmail,
53         trigger: "change",
54       },
55       {
56         pattern: /^[^\s]*$/,
57         message: "不能輸入空格",
58         trigger: "change",
59       },
60     ],
61 }

methods：

 1  private getCode() {
 2     if (this.emailForm.email != "") {
 3       this.codedisObj.codeDisabled = true;
 4       // this.get(
 5       //   { api: "/system/user/sendEmail/" + this.emailForm.email },
 6       //   (res) => {
 7       //     if (res.code == 200) {
 8 
 9       //     }
10       //   }
11       // );
12       const Countdown = 60;
13       if (!this.timer) {
14         this.countdown == Countdown;
15         this.timer = setInterval(() => {
16           if (this.countdown > 0 && this.countdown <= 60) {
17             this.countdown--;
18             if (this.countdown !== 0) {
19               this.codedisObj.codeDisabled = true;
20               this.codedisObj.codeMsg = "重新發送(" + this.countdown + ")";
21             } else {
22               clearInterval(this.timer);
23               this.codedisObj.codeMsg = "獲取簡訊驗證碼";
24               this.countdown = 60;
25               this.timer = null;
26               this.codedisObj.codeDisabled = false;
27             }
28           }
29         }, 1000);
30       }
31     } else {
32       this.codedisObj.codeDisabled = false;
33     }
34   }