vue element-ui 登录验证码
时间: 2023-09-25 07:16:46 浏览: 53
在Vue Element-UI框架中,登录验证码是通过使用element-ui的组件实现的。具体代码如下所示:
```html
<el-form-item prop="code">
<el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input>
<div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img" />
</div>
</el-form-item>
```
其中,`loginForm.code`是绑定的验证码输入字段,`codeUrl`是绑定的验证码图片的URL。点击验证码图片`getCode`方法会请求新的验证码图片。在登录事件`handleLogin`中,前端一般只需要判断验证码是否为空,并将`loginForm.code`传给后台进行验证。如果后台需要前端来判断验证码是否正确,后台会将验证结果返回给前端,前端可以在点击登录时判断输入的验证码和后台返回的验证码是否相等,不相等时弹出提示框拦截。
在这个登录验证码的过程中,用户名、密码和验证码都是前端提交给后台进行验证的。后台会将验证码存入session中进行比对,同时也可以根据需求将用户名和密码存入cookies中实现"记住我"功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue+elementui 实现登录验证码功能](https://blog.csdn.net/m0_53553562/article/details/123871513)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [vue+element实现登录界面(图片验证码、记住密码)](https://blog.csdn.net/stb666666/article/details/115353165)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [计算机程序设计语言课程设计(VUE.js)及实践项目的例子.txt](https://download.csdn.net/download/weixin_44609920/88236928)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]