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添加默认值

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkAAACmCAYAAACGCHk7AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAA9nSURBVHhe7Z0/a9zIG4B/n2S7aw63yRWBI3BVIGA4SJXDGHIQSHlVIMWBtwlHmpQhCS5cpLnGrtKfCbhIqq1CPkQ+Qea3I2mkd0bvK2ltazW7eoqHWHrn3y7Mk3dkzfh/i8XCdXH//n31/jaYa9/b4tmbR63rFBm36CuXtinRykvSMmn9NC7LafcDfXHIByRlkJWkDn91z/65437WYmvuPn/kjv78SY11ISeqNmnTeIpWbihD66Tl+q777geG9g/Tg6QM8pHUT+63fx653w+12Jpf7rijN7+6u1qsAzlJw8/aPYu0rIYsnzIknhLup+Xktbzfh1YP8gNJGWQjKS+hjizq5z8f3DiLSu8PmcChjFY2vRfaHIKsF+pucg37B5IyyEVS3Uu5A/f7mwfut1+0mI0Ugpzk1s8aVhvatcaQMp6+toe2A7sLkjLIQlI9SzmfRT17fqDGLMKklv8GtDLpfUla3rrWGFomIO+lZdLrTZH1IT+QlEEOkuqWUM+zqh7C5EwnadektWKbtBEYWiaUS/+VZeR1Sl8c8gdJGUwvqZ6lXM9v/PrQJr+c0Nrk1u4FZDvp/U3pa6/rWtIVg90BSRlMLqmRXjsIWBJI71k/p3S1p3Hdcn3X8n4fWj3IDyRlMK2kxnntQBImaTpZ5fUmMeuexdCyXWPQrody3XqwfZCUwaSSGuGBeYo22eU9bRKHe5vGNK5T7jb6DWxaHqYDSRlM2fcYrx2kWJPU3980lt6z6kuGlPHIcl19D20vsGl5mA4kZTBl39sgnfwBWSYljXfV6brfVS8llOsqv2l7Q8tCHiApg32XFMCugKQMkBRAHiApAyQFkAdIygBJAeQBkjJAUgB5gKQMkBRAHiApAyQFkAdIyiBfSS3d088/3IuXWgwWiyN3+mnlVquVu3p/pMRh10BSBkhK44N78e2He5cQjeXJpXv17as7jOptj6P3V2716dQdKTHYTZCUAZLqopSVOoaJJXVyQQa1byApgyn7vnv23b06W7rDj1q2EiQls5pECoUomrrvPn5oYi+/Fte+jxD3fdXxNTLWartAk5SeZb379t09fdKUM9suxnVZfLaizsvqM3y+jDdaV58tHXMASe0fSMpgakn5SVxPRD+B6wldSqqZ/OV1M2lTgZTXcVvr+kFcUdvt62IsqSium0l1tV2Ny7dZytmX8/3EkkNS8wNJGUwuKZn9RJO1vdyT5VWpeAFIGUTxWAReEO0MKRHFNSXV2bYYly9XSkjru4vyofn5UovBroKkDPKTVJjgAyQV1V0zWFIhS0u5DUn1tH1DSfkMarW6cqfHehx2FyRlkJ+kYpF0SiqSUHJvgKRU+URcX1Jm22RSYICkDHKSlJ+0jVi6JRWe2TTxRCidkqraMpZrDR2S6oh1tj1UUjyTmh1IymBySa0nYk0klR5JeaqJHOpHE7pHUh67/1JAUWxNS0i+jzo+sG0kBQZIymBySUXLPRgKkto/kJQBktpNijfOL07UGOwmSMoASe0q7N3bN5CUwZR9A0ADkjJAUgB5gKQMpuobOQLEICkDJAWQB0jKAEkB5AGSMkBSAHmApAyQ1H7TvNWux1UePnZfXj9zb+8oscWBe7t87r78dU+JwU1AUgZIar9BUrsDkjJAUvvN9SX12P2txSpJ/Xd8oMTgJiApg7lKyr/t7ievn8RhE3C8gTjZZJy+GR9tLm6LIN1gHNrWpZFspk42Tkd9hw3Kskw0trKtuu6aVn89m5dhGpCUwZwlFU3gQjrN8SqHH+VRK6WwGokppxZICgnoR7XoW4GkpLS+0nF6+VTtF301YymkK9pXpYiksgRJGcxaUpEsusUTT/ZEHCmVBBrRCLxkqn6bNpu+i3FFR8xUdeRRL9E4heAUOeqZG+QIkjJAUuFeksHUGYuxbKpEFGU1EllfSsfXK67X/a2ztRfFGHzfZRtqppVKKpVYAEntNEjKAEmFe002o2VCXZO9aEsTVYWv24ilEtJaNr69YllZi0vPpKJ7SGpvQVIGSKq8jkRSTHaxpKqyInOyF3FbUrF4Skk9PVtTLe98RlWPpSVIXz7J8CxJJWWLfrVxV30gr7xAUgazltR6oqpLsjWFtETsqcxIKmk1xM+yWm1HAqt++xYJMRFGdS/Uj2Kdklojx7YWnx8LktoNkJTBrCWVPvsBmBAkZYCk9DjAtkFSBkhKjwNsGyRlMFdJAeQGkjJAUgB5gKQMkAVAHiApAyQFkAdIygBJAeQBkjJAUgB5gKQMJpXU8am7Wvm/wnvlTo+VOMCMQFIGk0oqsDx3q0+n7kiLAcwEJGWQhaQWJ+58de5O1BjAPEBSBkgKIA+QlAGSAsgDJGWQh6SO3OmnlTtfajGAeYCkDPKQlKcU1YqMCmYKkjLIQ1J+ucdrCDBvkJRBPpIyMqjwLhWvKMCeg6QMspcUy0CYCUjKIH9JLdzJBZkU7D9IyiALSVlvnPv7LPVgJiApg0klVe/d4/UDACRlMKmkAKAGSRkgKYA8QFIGSAogD5CUAZICyAMkZYCkAPIASRkgKYA8QFIG+Upq6Z5+/uFevNRiMCkc+zwKSMoASekcfvzh3n2L2c5YPrgXSb+tvl9+de8+X7q7Ub1tUW5Tunp/pMTgJiApAySl4yX16mypxrZDKSv1808qKU6sGAskZTBl33fPvhcikFlLMymDpGRm8dUdyjaeXLpXdWzNxw9NzE/k9bXvI8RT6chY2nafpOK6RqYjxxfGVozrsvhs7759d09fVmVa0lEklX7eGjn28nurY+I7Kb/vy+r7XNfxY0nKhHLF2J409xqQ1FggKYOpJeUnSS2DYtKECRcmW5gs5XUjjnQSl9dxW2ICRm23r4uxCFF0SkptS0zq0HcoU8ililcxP+5Szr6MH3sqBUVSAd+GkUkVbdbSib+zRj7Vd1uLVHyWqFxzrwFJjQWSMphcUtH/4nKylhNJTlJZPpVKgZy8rYkci8BP5lgA7XgpmkA8rlRgkdQKEclJLj6LGFdT57Yk5evEwpFlm+9PjEeRVCfFQ3OOzRkDJGWQn6TCxBwgqajuGjl5WxNZiqBsO5aQFFEinYj2uDwtSakSiWO3LilrOViVvZmkfAbFiRRjgqQM8pNULJJOSSUTNbo3QFKqACr6JBXHknuTSsoWzs0kVUEmNRpIyiAnSflJ20y+bkmFrKGJJ5O6U1JVWx2T05aUUtf3lV6PKanis6flPeV3Fou/Yaikys+nte/hmdRYICmDySXllyOBaGL3SMpTiSrUj6TSIylPV/9dkvLEdZMJfSNJlXKKxrUmlVXcv5RMJSpRN3yO5vtDUjmCpAwml5Txvz7kCpIaCyRlgKRgM/hDrmOBpAyQFGwMe/dGAUkZTNk3ADQgKQMkBZAHSMpgqr6RI0AMkjJAUgB5gKQMkBRAHiApAyQFkAdIygBJaWjbVPLij+Nn7svrx+5vJbZYHLi3y+fuy1/3lBjkCpIyQFIaSAq2D5IyQFIaOyKp5QP3hxILkvrv+ECJQa4gKYO5Ssq/7e433hYnL1QbcZtNvJWkwtG+nmTDcLkJV6vb17Yn2QSsvXVfbZ7u2uQM+wWSMpizpLwgagn40wnq0wDCSQTxdS2aqGy4bjKvtO3iOjlhoRFTKayWjJDU7EBSBrOWVJTByCVee7nXHKuiS6WJK21Hx6H4tuOjUTqPdoHZgKQMkFS4J7OlfknFy7cNJFVlSPVSL4CkZg+SMkBS4d5NMqn4Xr+kkkwKYA2SMkBS5bWXUJPNdEmqqitFkzyj6pRUJbRYkApVxhXL8JZYnruVP2rl4kSPwyQgKYNZS8pcbnVLql0/LtstKU8lKtF/S0ZjSoq//JIlSMpg1pLqy2b2lvJ0TTKpvEBSBkhKj+8rR++vWOplCpIyQFJ6HGDbICmDuUoKIDeQlAGSAsgDJGWApADyAEkZICmAPEBSBkgKIA+QlAGSAsgDJGWApG6BUfbj3XP/vrYPrus+mRN2ESRlgKRuASQFtwCSMkBSt8CIkvr3oRbrOz4YdhEkZTBvSfmNxGKjr9xkXG3wrWPp2+nFyQcinkgq3oCsCazqm7feoQJJGcxXUqUk9FMGylhzsF1SthCYOPkgzaS0o1tah9ohKYhBUgZzlZQujo6YOOI3PbYllZSPxyd3eiHFx7kApCApg7lKqjjkzshi1M3HgyXVPiuqBElBN0jKYK6SUkUkY0kmJe8NkVR6BjpAH0jKYK6SKsViyKQVi59RxRKrni2lz6DEtc6Iz6SOT90VJ2/uHEjKYLaS8lQyqpdkMntKYvEDdrmk88s4L5xYSqWomvppZjbug/Pq5M3VuTtR45AjSMpg1pLaY04uyKR2DSRlgKT2jPCXYBDUzoGkDJAUQB4gKQMkBZAHSMoASQHkAZIyQFIAeYCkDJAUQB4gKQMkBZAHSMoASQHkAZIymLukio3GWW/+HWMvYPepn4uHj92X18/c2ztKDEYDSRkgqbEkFfb0lcTbajYBSc0FJGUwd0mNQrXvT4rp7tnXa4pwPElZRxOXkuL89G2DpAxmK6loA3F7c/Crs8vmdINwVLDYDNzaQCziXWdVlcRZlrn5WCAlFfetnbYw5uZlGAskZTBbSQUKWWknGPglYHXagZeILFf83CwRCyklR7fYmU/ZZpNlVX3UQtHjdXscTby3ICkDJGVIqpjgQhCiXEsMkTh6JJVIpkCOQZwAWsZjSXkhxm37/nJ+8A9DQVIGSGpzSZWiSTKpOmsZIKk08xksqfJnuQwsQVL7AJIyQFLXkFTxs5SErF+JxFpqaZmUvDdAUqYAYadBUgZIanNJ+cyp85WCQjqxTJrf7pWZVvrMqb4u+kmyNNFWMbZUci14JrWLICmDuUqqnOwhEwqUk3/zTKqpW/dRiSoQS62SSCCRiRybr5c+h2qNPV0+IqmdBEkZzFVSN0HLpOLnUgCbg6QMkNSmJMuzgnQJB7A5SMoASV0DZbmHoOCmICkDJAWQB0jKAEkB5AGSMkAWAHmApAyQFEAeICkDJAWQB0jKAEkB5AGSMphUUsen7sr/SfDVlTs9VuIAMwJJGUwqqcDy3K0+nbojLQYwE5CUQRaSWpy489W5O1FjAPMASRkgKYA8QFIGSAogD5CUQR6SOnKnn1bufKnFAOYBkjLIQ1KeUlQrMiqYKUjKIA9J+eUeryHAvEFSBvlIysigwrtUvKIAew6SMsheUiwDYSYgKYP8JbVwJxdkUrD/ICmDLCRlvXHu77PUg5mApAwmlVS9d4/XD2DuLNz/AWRrnGk80a0SAAAAAElFTkSuQmCC" alt="" />

3.添加限制规则

aaarticlea/png;base64,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" alt="" />

 

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