vue验证码的实现

最新推荐文章于 2024-05-07 09:20:21 发布
最新推荐文章于 2024-05-07 09:20:21 发布
阅读量435 收藏 1
点赞数 4
文章标签： vue html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45372783/article/details/109636250
版权

Ant Design vue验证码的实现

验证码组件（子组件）

#Verification.vue

<template>
    <div class="s-canvas">
        <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
    </div>
</template>

<script>
    export default {
        name: "Verification",
        //定义props数据可以通过父组件向子组件传递随机数让子组件渲染成验证码
        props: {
            identifyCode: {
                type: String,
                default: '1234'
            },
            fontSizeMin: {
                type: Number,
                default: 16
            },
            fontSizeMax: {
                type: Number,
                default: 40
            },
            backgroundColorMin: {
                type: Number,
                default: 180
            },
            backgroundColorMax: {
                type: Number,
                default: 240
            },
            colorMin: {
                type: Number,
                default: 50
            },
            colorMax: {
                type: Number,
                default: 160
            },
            lineColorMin: {
                type: Number,
                default: 40
            },
            lineColorMax: {
                type: Number,
                default: 180
            },
            dotColorMin: {
                type: Number,
                default: 0
            },
            dotColorMax: {
                type: Number,
                default: 255
            },
            contentWidth: {
                type: Number,
                default: 112
            },
            contentHeight: {
                type: Number,
                default: 38
            }
        },
        methods: {
            // 生成一个随机数
            randomNum(min, max) {
                return Math.floor(Math.random() * (max - min) + min)
            },
            // 生成一个随机的颜色
            randomColor(min, max) {
                let r = this.randomNum(min, max)
                let g = this.randomNum(min, max)
                let b = this.randomNum(min, max)
                return 'rgb(' + r + ',' + g + ',' + b + ')'
            },
            drawPic() {
                let canvas = document.getElementById('s-canvas')
                let ctx = canvas.getContext('2d')
                ctx.textBaseline = 'bottom'
                // 绘制背景
                ctx.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax)
                ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)
                // 绘制文字
                for (let i = 0; i < this.identifyCode.length; i++) {
                    this.drawText(ctx, this.identifyCode[i], i)
                }
                this.drawLine(ctx)
                this.drawDot(ctx)
            },
            drawText(ctx, txt, i) {
                ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)
                ctx.font = this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei'
                let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
                let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)
                var deg = this.randomNum(-45, 45)
                // 修改坐标原点和旋转角度
                ctx.translate(x, y)
                ctx.rotate(deg * Math.PI / 180)
                ctx.fillText(txt, 0, 0)
                // 恢复坐标原点和旋转角度
                ctx.rotate(-deg * Math.PI / 180)
                ctx.translate(-x, -y)
            },
            drawLine(ctx) {
                // 绘制干扰线
                for (let i = 0; i < 8; i++) {
                    ctx.strokeStyle = this.randomColor(this.lineColorMin, this.lineColorMax)
                    ctx.beginPath()
                    ctx.moveTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
                    ctx.lineTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
                    ctx.stroke()
                }
            },
            drawDot(ctx) {
                // 绘制干扰点
                for (let i = 0; i < 100; i++) {
                    ctx.fillStyle = this.randomColor(0, 255)
                    ctx.beginPath()
                    ctx.arc(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight), 1, 0, 2 * Math.PI)
                    ctx.fill()
                }
            }
        },
        watch: {
            identifyCode() {
                this.drawPic()
            }
        },
        mounted() {
            this.drawPic()
        }
    }
</script>

<style scoped>

</style>

注册组件（父组件）

关于验证码部分的片段

<a-form-item
                v-bind="formItemLayout"
                label="Captcha"
                extra="We must make sure that your are a human."

        >
            <a-row :gutter="8">
                <a-col :span="6">
                    <a-input v-decorator="[
              'captcha',
              { rules: [{ required: true, message: '请输入验证码!' },{validator:validateCode,}] },
            ]"/>
                </a-col>
                <a-col :span="12" @click="refreshCode">
                    <Verification :identifyCode="identifyCode"></Verification>
                </a-col>
            </a-row>
        </a-form-item>

父组件js部分

<script>
    import Verification from "./Verification";

    export default {
        name: "register",
        components:{
            Verification
        },
        data() {
            return {
                identifyCodes: '1234567890',
                identifyCode: '',
                formItemLayout: {
                    labelCol: {
                        xs: { span: 24 },
                        sm: { span: 8 },
                    },
                    wrapperCol: {
                        xs: { span: 24 },
                        sm: { span: 16 },
                    },
                },
            };
        },
        methods: {
       		 //取随机数
            randomNum(min, max) {
                return Math.floor(Math.random() * (max - min) + min)
            },
            //重置验证码方法
            refreshCode() {
                this.identifyCode = ''
                this.makeCode(this.identifyCodes, 4)
            },
            //重置验证码具体实现
            makeCode(o, l) {
                for (let i = 0; i < l; i++) {
                    this.identifyCode += this.identifyCodes[
                        this.randomNum(0, this.identifyCodes.length)
                        ]
                }
            },
            //validator的验证方法，value为输入框输入的值，callback定义的是返回的提示。在antd的v-decorator表单验证中，callback()带值，则提交不了表单，比如这样callback('123')即时callback('')也不行。
            validateCode(rule, value, callback) {
                const identifyCode = this.identifyCode
                if (identifyCode !== value) {
                    callback('请输入正确的验证码');
                } else {
                    callback();
                }
            },
        },
        //保证每次刷新都进行验证码的更新
        created() {
            this.refreshCode()
        }
    }
</script>

效果

说明

该验证码因为用的是antd的v-decorator的数据验证，所以效果是在输入时就会有提示是否输入正确，而不是在提交表单之后才给提示。若是要后者的效果，选择用在form表单标签写数据验证规则。

实现思路

父组件创建一个随机值—>子组件接收值通过canvas 绘制验证码。
传值：子组件上建立props数据表

export default {
        name: "Verification",
        props: {
            identifyCode: {
                type: String,
                default: '1234'
            },
            }
            }

父组件在调用子组件时在其标签上用冒号加变量名引用传值：

<Verification :identifyCode="identifyCode"></Verification>//冒号里的identifyCode为要穿给子组件的数据

父组件向子组件传值参考：https://www.cnblogs.com/shengnan-2017/p/10419050.html

父组件完整代码

#register.vue

<template>
    <a-form :form="form"  class="register1"  @submit="handleSubmit">
        <a-form-item v-bind="formItemLayout" label="邮箱">
            <a-input
                    v-decorator="[
          'email',
          {
            rules: [
              {
                type: 'email',
                message: 'The input is not valid E-mail!',
              },
              {
                required: true,
                message: 'Please input your E-mail!',
              },
            ],
          },
        ]"
            />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="密码" has-feedback>
            <a-input
                    v-decorator="[
          'password',
          {
            rules: [
              {
                required: true,
                message: '请输入密码!',
              },
              {
                validator: validateToNextPassword,
              },
            ],
          },
        ]"
                    type="password"
            />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="确认密码" has-feedback>
            <a-input
                    v-decorator="[
          'confirm',
          {
            rules: [
              {
                required: true,
                message: '请确认您的密码!',
              },
              {
                validator: compareToFirstPassword,
              },
            ],
          },
        ]"
                    type="password"
                    @blur="handleConfirmBlur"
            />
        </a-form-item>
        <a-form-item v-bind="formItemLayout">
      <span slot="label">
        昵称&nbsp;
        <a-tooltip title="网络世界真真假假假假真真">
          <a-icon type="question-circle-o" />
        </a-tooltip>
      </span>
            <a-input
                    v-decorator="[
          'nickname',
          {
            rules: [{ required: true, message: '请输入昵称!', whitespace: true }],
          },
        ]"
            />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="电话号码">
            <a-input
                    v-decorator="[
          'phone',
          {
            rules: [{ required: true, message: '请输入你的电话号码!' }],
          },
        ]"
                    style="width: 100%"
            >
                <a-select
                        slot="addonBefore"
                        v-decorator="['prefix', { initialValue: '86' }]"
                        style="width: 70px"
                >
                    <a-select-option value="86">
                        +86
                    </a-select-option>
                    <a-select-option value="87">
                        +87
                    </a-select-option>
                </a-select>
            </a-input>
        </a-form-item>

        <a-form-item
                v-bind="formItemLayout"
                label="Captcha"
                extra="We must make sure that your are a human."

        >
            <a-row :gutter="8">
                <a-col :span="6">
                    <a-input v-decorator="[
              'captcha',
              { rules: [{ required: true, message: '请输入验证码!' },{validator:validateCode,}] },
            ]"/>
                </a-col>
                <a-col :span="12" @click="refreshCode">
                    <Verification :identifyCode="identifyCode"></Verification>
                </a-col>
            </a-row>
        </a-form-item>
        <a-form-item v-bind="tailFormItemLayout">
            <a-checkbox v-decorator="['agreement', { valuePropName: 'checked' }]">
                I have read the
                <a href="">
                    agreement
                </a>
            </a-checkbox>
        </a-form-item>
        <a-form-item v-bind="tailFormItemLayout">
            <a-button type="primary" html-type="submit" >
                Register
            </a-button>
        </a-form-item>
    </a-form>
</template>

<script>
    import Verification from "./Verification";

    export default {
        name: "register",
        components:{
            Verification
        },

        data() {
            return {
                isDebugLogin: false,
                confirmDirty: false,
                identifyCodes: '1234567890',
                identifyCode: '',
                code:'',
                autoCompleteResult: [],
                formItemLayout: {
                    labelCol: {
                        xs: { span: 24 },
                        sm: { span: 8 },
                    },
                    wrapperCol: {
                        xs: { span: 24 },
                        sm: { span: 16 },
                    },
                },
                tailFormItemLayout: {
                    wrapperCol: {
                        xs: {
                            span: 24,
                            offset: 0,
                        },
                        sm: {
                            span: 16,
                            offset: 8,
                        },
                    },
                },
            };
        },
        beforeCreate() {
            this.form = this.$form.createForm(this, { name: 'register' });
        },
        methods: {
            randomNum(min, max) {
                return Math.floor(Math.random() * (max - min) + min)
            },
            refreshCode() {
                this.identifyCode = ''
                this.makeCode(this.identifyCodes, 4)
            },
            makeCode(o, l) {
                for (let i = 0; i < l; i++) {
                    this.identifyCode += this.identifyCodes[
                        this.randomNum(0, this.identifyCodes.length)
                        ]
                }
            },
            handleSubmit(e) {
                e.preventDefault();
                this.form.validateFieldsAndScroll((err, values) => {
                    if (!err) {
                        console.log('Received values of form: ', values);
                    }
                });
            },
            handleConfirmBlur(e) {
                const value = e.target.value;
                this.confirmDirty = this.confirmDirty || !!value;
            },
            compareToFirstPassword(rule, value, callback) {
                const form = this.form;
                if (value && value !== form.getFieldValue('password')) {
                    callback('Two passwords that you enter is inconsistent!');
                } else {
                    callback();
                }
            },
            validateCode(rule, value, callback) {
                const identifyCode = this.identifyCode
                if (identifyCode !== value) {
                    callback('请输入正确的验证码');
                } else {
                    callback();
                }
            },
            validateToNextPassword(rule, value, callback) {
                const form = this.form;
                if (value && this.confirmDirty) {
                    form.validateFields(['confirm'], { force: true });
                }
                callback();
            },

        },
        created() {
            this.refreshCode()
        }
    }
</script>

<style>
.register1{
    margin: 0 auto;
    padding-right: 20%;
}
</style>
```![](https://img-blog.csdnimg.cn/20201112103500887.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM3Mjc4Mw==,size_16,color_FFFFFF,t_70#pic_center)

本例用到的ant design 组件，若需复现记得在main.js里面注册相应组件。

本文借鉴：https://www.jianshu.com/p/99c6e2f3e457
weixin_45372783
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 验证码的几种方式
weixin_46463643的博客
08-20 2660
1. <span @click="randyzm()" style="display: inline-block;text-align: center; width: 90px;font-size: 20px; height: 32px; line-height:32px; color: #2b3b4b;background-color: #1ea7fe" >{{code}}</span> data(){ return{ code:'.
img显示本地图片_vue图片滑动验证
weixin_39983554的博客
12-01 370
vue图片滑动验证读完这篇文章，可以掌握如何实现Vue的图片滑动验证，以及滑动验证的自定义显示的图片背景自定义图片之后的滑动验证背景首先安装插件支持(先简要概述下组件参数的配置信息和配置位置)npm install vue-puzzle-vcodehtml代码部分<Vcode :show="isShow" @success="success"/>其中@success是验证成功...
基于 vue 的验证码组件
Start2019
12-05 3671
登录页面有个验证码，暂时没用到后台，在网上找了两个博客，记录一下。 一、直接写（参考-UIEngineer） 这个样式比较简单，直接在需要验证码的地方添加就行了。如果这个页面比较复杂，用组件会比较好。 <template> <div class="join_formitem"> <label class="enquiry">验证码&lt...
2024年最全Vue实现验证码登录_vue 验证码(1)，这是一份面向前端开发者的复习指南
最新发布
2301_82244279的博客
05-07 1672
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
vue 前端实现图片验证码
m0_64544033的博客
04-12 439
图片验证码 前端直接验证无需调用后端 vue图片验证码
vue3前端实现图形验证码
spuerSun的博客
05-26 3556
vue3 identify插件使用
vue实现验证码输入框组件
08-28
Vue 实现验证码输入框组件 在最近的项目中，我们遇到了这样一个需求：输入 4 位或 6 位短信验证码，输入完成后收起键盘。下面我们将一步步地实现这个需求。 首先，我们需要布局排版验证码输入框组件。我们使用 `...
VUE实现图片验证码功能
12-30
本文实例为大家分享了VUE实现图片验证码的具体代码，供大家参考，具体内容如下 1. 概述 1.1 说明 在开发过程中，有时候需要使用图片验证码进行增加安全强度，在点击图片时更新新的图片验证码，记录此功能，以便后期...
Vue实现验证码功能
10-15
在 Vue 应用中实现验证码功能可以帮助增强表单验证的安全性，防止自动化脚本或机器人提交数据。下面我们将详细介绍如何在 Vue 中实现验证码功能，以及相关的代码示例。 1. **验证码组件创建** 首先，我们需要创建...
使用Vue 实现滑动验证码功能
10-16
本文章主要来介绍一下第一个阶段，也就是前端校验的验证码的实现，下面来介绍一下拖动验证码的具体实现。这篇文章主要介绍了利用 Vue 实现滑动验证码,需要的朋友可以参考下
vue插件——使用canvas生成图形验证码
08-12
This is a digital graphic verification code written in canvas(这是一个vue的插件，使用canvas来生成图形验证码)
图片验证码控件和Demo
11-06
非常实用，简单，一看就懂。 已经试过，可用，可编辑4位到10位的验证码。
vue实现图形验证码
树上骑个猴的博客
01-05 1804
效果图： 代码： 验证码组件： src/common/sIdentify.vue <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div> </template> <script> export default { n
vue四位随机验证码
KingRules的博客
12-10 1209
1、新建生成验证码的组件Sidentify.vue(代码如下): 下面展示一些 内联代码片。 <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div> </template> <script> export defa
IDaaS 系统 ArkID 一账通内置插件：图形验证码认证因素的配置流程
vagerdwely的博客
09-13 490
图形验证码认证因素插件对用户认证凭证表单进行扩充，插入图形验证码并实现相关验证功能,是 IDaaS 一账通 ArkID 系统内置功能插件之一。
vue 验证码组件
u011295864的博客
01-10 2024
&lt;template&gt; &lt;div class="s-canvas"&gt; &lt;canvas id="s-canvas" :width="contentWidth" :height="contentHeight"&gt;&lt;/canvas&gt; &lt;/div&gt; &lt;/template&
前端随机生成验证码vue&js&vant~element
hyduan_h5的博客
03-11 2425
1.具体实现效果 2.创建SIdentify组件，主要用于验证码样式 <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div> </template> <script> export default{ name: 'S
vue登录或其他操作进行图片验证的插件vue-puzzle-vcode
weixin_45781661的博客
09-06 657
vue登录或其他操作进行图片验证的插件vue-puzzle-vcoded 首先提前准备好图片 <template> <button @click='open'>点击</button> <Vcode @click.prevent :imgs="imgs" :show="isShow" @success="success" @close="close" /> </template> <script> import Vcode fro
vue3实现验证码刷新
07-09
在 Vue 3 中实现验证码刷新，你可以按照以下步骤进行操作： 1. 在 Vue 3 组件中，首先定义一个变量来存储验证码的值，例如 `captcha`。 2. 在模板中使用该变量来显示验证码的值，例如 `<span>{{ captcha }}</span>`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值