vue+element-ui集成随机验证码+用户名+密码的form表单验证

在登入页面,我们往往需要通过输入验证码才能进行登入,那我们下面就详讲一下在vue项目中如何配合element-ui实现这个功能

第一步:自定义一个生产随机验证码的组件,其本质是使用canvas绘制,详细代码如下:


第二步:使用该组件:

我们首先新建一个vue组件,在该组件进行布局,其中还包括用户名和密码的验证(这只是前端的简单验证,真实项目中还需要请求登入接口进行后端验证)

 第三步:生产随机码与进行登入验证


最后的效果如下,当我们输入之后鼠标失去焦点就会进行验证:

vue+element-ui集成随机验证码+用户名+密码的form表单验证_第1张图片

你可能感兴趣的:(功能库)