模拟4位随机验证码

Posted 2020-12-01 cnlisiyiii-stu

代码：

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>