模擬4位隨機驗證碼

代碼：

1 <template>
2     <view>
3         <button hover-class="none" id="code" @click="codeRandom" :disabled="yanDisable" title="點擊更換驗證碼">
4             <text>{{ codenum }}</text>
5         </button> 
6     </view>
7 </template>

 1 <script>
 2 export default {
 3     data() {
 4         return {
 5             code: '',
 6             codenum: ''
 7         };
 8     },
 9     methods: {
10         codeRandom() {
11             this.code = '';
12             this.codenum = '';
13             var codeLength = 4; //驗證碼的長度
14             var random = [
15                 0,
16                 1,
17                 2,
18                 3,
19                 4,
20                 5,
21                 6,
22                 7,
23                 8,
24                 9,
25                 'A',
26                 'B',
27                 'C',
28                 'D',
29                 'E',
30                 'F',
31                 'G',
32                 'H',
33                 'I',
34                 'J',
35                 'K',
36                 'L',
37                 'M',
38                 'N',
39                 'O',
40                 'P',
41                 'Q',
42                 'R',
43                 'S',
44                 'T',
45                 'U',
46                 'V',
47                 'W',
48                 'X',
49                 'Y',
50                 'Z'
51             ]; //隨機數
52             for (var i = 0; i < codeLength; i++) {
53                 var index = Math.floor(Math.random() * 36); //取得隨機數的索引（0~35）
54                 this.code += random[index]; //根據索引取得隨機數加到code上
55             }
56             this.codenum = this.code; //把code值賦給驗證碼
57         },
58         validate() {
59             var inputCode = this.user.code.toLowerCase(); //取得輸入的驗證碼並轉化爲大寫
60             if (inputCode.length <= 0) {
61                 this.tools.toastShow('請輸入驗證碼！'); //則彈出請輸入驗證碼
62             } else if (inputCode != this.code.toLowerCase()) {
63                 this.tools.toastShow('驗證碼有誤！'); //則彈出驗證碼輸入錯誤
64                 this.codeRandom(); //刷新驗證碼
65                 this.user.code = ''; //清空文本框
66             } else {
67                 // _this.successUrl = 'https://ping.jiaoyubao.cn/m/step1';
68                 this.goStep();
69             }
70         },
71         getHbNow() {
72             let _this = this;
73             let isTelRight = _this.tools.checkPhoneNum(_this.user.mobile);
74             let ajaxUrl = _this.$api.PostMessageCode.url + '&key={mobile:' + _this.user.mobile + '}';
75             if (!isTelRight) {
76                 _this.tools.toastShow('請輸入正確的手機號碼');
77             } else {
78                 _this.validate();
79             }
80         }
81     }
82 };
83 </script>

 1 <style lang="scss">
 2 #code {
 3     height: 86upx;
 4     font-style: italic;
 5     background: #d9d9da;
 6     color: green;
 7     border: 0;
 8     padding: 4upx 6upx;
 9     letter-spacing: 6upx;
10     font-weight: bolder;
11 }
12 </style>