vue添加图形验证码功能

最新推荐文章于 2024-08-03 11:27:16 发布

就像风1样

最新推荐文章于 2024-08-03 11:27:16 发布

阅读量3.2k

点赞数 2

分类专栏： Vue vue专栏文章标签： vue 验证码图形验证码

本文链接：https://blog.csdn.net/qq_42221334/article/details/88184605

版权

本文介绍了在Vue项目中添加图形验证码的功能实现。通过点击事件切换验证码，前端验证用户输入，后端验证输入的验证码是否正确。关键在于解决因图片地址相同导致浏览器缓存问题，通过添加Math.random()确保每次请求的图片地址不同，从而强制刷新验证码。

摘要由CSDN通过智能技术生成

上图看功能，每点击一次切换验证码！前端判断验证码是否输入，后端判断验证码是否正确！

html

<el-form-item label="验证码" prop="code" style="width: 570px">
          <el-input v-model="ruleForm.code" placeholder="请输入验证码" size="small" style="width: 187px;float: left;"></el-input>

          <div class="Verification" @click="clickVerification">
            <img :src="VerificationImg"/>
          </div>
          
</el-form-item>

data() {
    return {
        VerificationImg:"",//图形验证码链接
    }

},
methods: {
    //获取验证码
    clickVerification(){
          var num = Math.random();
          this.imgUrls(num)