element表单校验 【登录】
async btnOK () {
// 1. 表单校验 (调用表单的校验方法获取校验结果)
// this.$refs.formRef.validate(function (valid) {
// console.log(valid);
// });
try {
await this.$refs.formRef.validate();
} catch (error) {
return console.log(error);
}
// 2. 数据是否要加工处理
// 3. 发生请求请求
this.isLoading = true;
// 这里异步的;如果不写awiat则会出现权限控制逻辑错误
try {
await this.$store.dispatch("user/loginAction", this.formData);
this.$router.push("/");
} catch (error) {
this.isLoading = false;
}
// 调用获取用户资料的action,因为这里已经有了token
// 这里写,必须要重新登录才可以!
// await this.$store.dispatch('user/getUserProfileAction');
// 4. 跳转主页(登录成功才可以跳转)
this.isLoading = false;
},
element表单校验 【登录】的更多相关文章
- vue+element表单校验功能
要实现这个功能其实并不难,element组件直接用就可以, 但是我在使用过程中碰到了几个坑,就记录下来,分享给大家,避免落坑,话不多说,直接上过程...... 表单校验功能: 实现这个功能,总共分 ...
- element 表单校验失败自动聚焦到失败的input框
1.在对应的input框上添加ref属性,直接根据ref就可精确地获取到元素 <el-form-item label="课程名称" :label-width="fo ...
- Element 表单校验不消失问题
由于不好的命名习惯,所以我的:rule :ref :model命名就是写了改,改了再写. 直到今天出现了这个毛病就是 “表单验证不消失” 比方说这里的 ‘密码不能为空’,在我已经输入了数字 ...
- Vue使用Element表单校验错误Cannot read property ‘validate’ of undefined
在做注册用户的页面使用表单校验一直提示Cannot read property 'validate' of undefined错误,其实这个错误的提示根据有多种情况,比较常见的就是 ref 的名字不一 ...
- js--吐血总结最近遇到的变态表单校验---element+原生+jq+easyUI(前端职业生涯见过的最烦的校验)
最近写了无数各种形式的表单,记录下奇奇怪怪的校验规则~ 一:首先是element自带的rules校验规则: element作为常用框架,自带rules属性简单易懂,官方文档一目了然,不再赘述,应付常用 ...
- bootstrap+jQuery.validate表单校验
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
- jQuery.validate表单校验+bootstrap
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
- 简单好用的表单校验插件——jQuery Validate基本使用方法总结
jquery validate当前最新版本是1.17.0,下载链接是:https://github.com/jquery-validation/jquery-validation/releases/t ...
- Vue Element-ui表单校验规则,你掌握了哪些?
1.前言 Element-ui表单校验规则,使得错误提示可以直接在form-item下面显示,无需弹出框,因此还是很好用的. 我在做了登录页面的表单校验后,一度以为我已经很了解表单的校验规则. ...
- 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件
表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...
随机推荐
- 【Vue2】Vue-Cli使用
1.需要NodeJS环境支持,此处省略NodeJS安装 2.使用NPM命令安装CLI包 vue-cli是npm.上的一个全局包,使用npm install 命令,即可方便的把它安装到自己的电脑上: n ...
- 【Vue2】Computed 计算属性
计算属性在编写的时候是一个方法 但是在调用的时候作为属性使用 <!DOCTYPE html> <html lang="en"> <head> & ...
- 【Java】Collections 集合工具类
Collections 集合工具类 - 操作Set.List.Map等集合的工具 - 提供了排序.查询.修改.操作,提供对对象设置不可变对集合容器对象实现同步控制等方法 排序操作: - static ...
- 【Java】IDEA普通JavaEE项目实现SSM整合
一.需要的组件 首先是解决组件问题,非Maven项目构建的jar包 [Servlet & JSP & JSTL] 虽然不是Maven项目,但是JSTL的组件是需要引入的 这里就按照Ma ...
- AI的技术发展:记忆与想象力 —— 【人工智能】记忆、想象与AI | 查兰·兰加纳特 | 心理学与神经科学家 | 人脑如何记忆 | 内部模型 | 稳定可塑性难题 | 想象力的由来 | AI内容传播 | 脑机接口BCI
原文地址: https://www.youtube.com/watch?v=cHYKbVP1GTQ 加利福尼亚大学戴维斯分校教授.心理学家兼神经科学家查兰·兰加纳特Charan Ranganath,最 ...
- openAI的比赛retro contest的一些细节设置(Detail)
2018年openAI公司搞了一个比赛retro contest,该比赛目的是为了在自家的库retro上测试迁移强化学习的性能,虽然这个比赛已经结束多年但是现在了解一些也是有一定益处的. 比赛细节介绍 ...
- Long Way to be Non-decreasing 题解
前言 题目链接:洛谷:CF. 题意简述 yzh 喜欢单调不降序列. 她有一个序列 \(a\),最初为 \(a_1, \ldots, a_n\),其中每个元素都在 \([1, m]\) 内. 她希望使序 ...
- 免费word简历 简历制作平台
分享一个简历制作平台. 免费的word模版 链接地址 https://www.xyjianli.com/ https://www.xyjianli.com/list https://www.xyjia ...
- quartz监控日志(二)添加监听器
上一章介绍监控job有三种方案,其实还有一个简单方案是实现quartz的TriggerListener. 上次我也试了这个方案,但是由于操作错误,导致没有监控成功,所以才选择分析源码来实现代理进行监控 ...
- [nRF24L01+] 4. 增强型ShockBurst
4. 增强型ShockBurst 增强型的ShockBurst是一个数据链路层,具有自动数据包组装和数据包的发送.定时.自动确认和重传.这些特性能够显著提高双向和单向系统的能效,而不会增加主机控制器侧 ...