element-plus+vite+guiplan注册页面添加验证码功能

element-plus+vite+guiplan注册页面添加验证码功能

介绍

在前几章讲到了注册页面的制作，以及后端验证码接口的制作，这一章讲解如何在注册页面里添加验证码

步骤

1. 添加验证码字段与校验
   选择外层el-form元素，可以看到之前做注册功能的创建的数据，点击编辑
   
   添加一个code字段与code校验如下图：
   
2. 创建验证码输入文本框
   复制一个"请再次输入密码"的div层，如下图有两个请再次输入密码文本框以及校验
   选择这个el-form-item元素，点击属性将校验信息改为code
   
   选中文本框并修改属性代码如下，删掉文本框前图标以及密码类型，只保留placeholder属性即可

{placeholder:'请输入验证码'}

再将文本框绑定改为form.code

这样校验文本框的绑定与校验就完成了
3. 添加验证码图片
选中img标签并点击插入，将图片添加进来

再添加一个div,将图片与文本框裁剪到这个div中，有了div包裹就可以调整里面的子元素的布局方式了

按这个图标来进行水平布局

调整好布局如下图

选中这个图片之后，我们来创建一个图片路径数据

imgCodeSrc:'http://localhost:3000/api/user/captcha'

创建一个刷新图片的方法代码如下：

refreshCode(){
  this.imgCodeSrc = ''
  var times = setTimeout(()=>{ // 刷新验证码
      this.imgCodeSrc = 'http://localhost:3000/api/user/captcha'
  },200)
}

图片属性里将imgCodeSrc绑定到src中，代码如下

{
  ':src':'imgCodeSrc',
  alt:'guiplan官网',
  width:'120',
  'v-if':'imgCodeSrc'
}

最后图片的点击事件中绑定这个方法

这样当我们点击图片的时候即可刷新验证码

总结

在原有的注册数据中添加验证码数据以及校验数据，然后复制一个类似的校验层，修改校验方式与绑定。再添加一个图片，将图片路径直接改为验证码路径，用来获取验证码，并对验证码添加一个点击刷新功能。这样验证码功能就完成了。注册界面与注册接口都已经写好了，下一章将讲解注册页面如何调用接口并完成注册。喜欢的朋友别忘了点击关注哟。