vue3.0使用element-plus表单登录提交报错validate

已于 2022-04-19 08:41:25 修改
阅读量3.9k 收藏 1
点赞数 2
分类专栏： element-ui Vue 文章标签： vue.js javascript elementui
于 2022-02-21 10:35:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SmartJunTao/article/details/123041564
版权
Vue 同时被 2 个专栏收录
196 篇文章 17 订阅
订阅专栏
element-ui
20 篇文章 1 订阅
订阅专栏

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Ii56ZW_5Zyo6Ii55LiK,size_18,color_FFFFFF,t_70,g_se,x_16

注意事项：

ref="ruleFormFef"和model="ruleForm"不能重复使用

getCurrentInstance方法，作用是获取当前示例。注意路由和store 线上使用有问题，在这里获取表单ref没有问题。

 

完整写法：

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Ii56ZW_5Zyo6Ii55LiK,size_15,color_FFFFFF,t_70,g_se,x_16

 

 ​​​​​watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Ii56ZW_5Zyo6Ii55LiK,size_20,color_FFFFFF,t_70,g_se,x_16

 

 watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Ii56ZW_5Zyo6Ii55LiK,size_12,color_FFFFFF,t_70,g_se,x_16

 

 

 

 

 

船长在船上
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
element plus表单自定义校验规则和验证单个字段
温情
05-13 5213
关键代码 // prop 设置校验规则 <el-form ref="registerFormRef" :model="registerForm" status-icon :rules="registerRules" label-width="70px"> <el-form-item label="手机号" prop="tel"> <el-input v-model="registerForm.tel" autocomplete="off" placehold
vue3-form-validation：Vue 3中的DIY表单验证
02-11
vue3-form-validation 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
Vue3 Element Plus表单自定义校验实现步骤
最新发布
qq_41737571的博客
05-20 775
【代码】Vue3 Element Plus表单自定义校验实现步骤。
vue3+element-plus validate校验
Florenza的博客
01-11 4391
预期效果:点击确定 校验输入框内容 由于文档上写的比较模糊 经尝试结果代码应为 <template> <el-form :ref="formdata" :model="form"> <el-radio-group v-model="form.isCache"> <el-radio label="0"> 缓存 ...
elementPlus学习（持续更新）
ArmadaDK的博客
06-29 1632
谁能想到element还要学啊，昨天写表单，发现自己完全不太懂表单的校验，有没有人和我一样在大学做项目表单从来不校验的，毕竟只有自己用，能展示就行。所以决定今天仔细看一下elementui的一些不熟悉的内容。
Vue3实现登录表单验证
前端小攻城狮的博客
06-14 7005
使用async-validator实现表单验证
element plus自定义组件表单校验
weixin_36878452的博客
01-14 1071
【代码】element plus自定义组件表单校验。
vue3.0-element-admin:基于vue3.0和element-plus开发的企业后台管理模板
03-30
element_vue3.0 / VE-Admin 项目简介基于vue3和element-plus开发的企业后台管理模板。功能特性项目使用了最新的vue3全家桶+元件加+ mockjs + Axios公司+ eChart5。项目继成了mockServe，可脱离后端自主开发测试对...
vue3.0+element-plus实现国际化语言，动态路由菜单demo
01-27
在本项目中，"vue3.0+element-plus实现国际化语言，动态路由菜单demo"，开发者采用最新的Vue.js 3.0框架与Element Plus UI库，构建了一个具有国际化功能和动态路由菜单的示例应用。这个项目对于学习Vue 3的新特性...
vue3-element-plus-typescript：基于vue-cli vite + vue3.0 + element-plus + typescript +模拟数据的后台管理系统列表页增删改查功能
02-14
vue3-element-plus-typescript基于vue-cli / vite + vue3.0 + element-plus +打字稿+ mock数据的后台管理系统列表页增删改查功能vue-cli版： : vite版： :系统模块数据是mock数据使用了Vue3.0全家桶，Element-plus和...
vue3.0 + element-plus + 后台系统.zip
01-02
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...
基于vue3.0和element-plus开发的企业后台管理模板..zip
01-16
开发过程中，开发者需要熟悉Vue3.0的API和新特性，以及Element-Plus组件的使用方法。对于初学者，可以参考官方文档，结合实际项目进行学习和实践，不断提升技术水平。同时，利用Vue CLI工具可以加速项目的初始化和...
【Vue3】通用表单校验的两种方式
冷芝士鸭的学习笔记
03-17 1万+
还有一种就是点击按钮时进行整个表单的校验，比如登录时，检查表单所有输入内容是否合法。当不合法时，显示Toast提示信息。// 校验函数返回 true 表示校验通过，false 表示不通过。中定义该对象，给按钮添加。中无参数默认校验整个表单。通过自定义验证器校验。
element-plus表单验证使用 个人总结
热门推荐
ymzhao
10-18 4万+
表单验证能通过设置验证规则验证用户的输入，并对不规范的输入做出对应提示。element-plus（包括element-ui）都提供了表单验证功能。但官网上只有最基本的使用方法，详细使用需要参考async-validator，element-plus表单验证就是通过它实现的..............................
elementui表单的一些用法
D_Z_Yong的博客
08-29 696
form表单的一些用法 validate（）时elment-ui封装好的用于对整个表单进行验证 validate的参数是一个回调函数。该回调函数在校验结束后被调用，是否校验成功和未通过校验的字段。 若不传入回调函数，则会返回以promise 参数：Function( callback : Function( boolean,obj ) ) isPass是布尔值，为true时表示校验通过。 调用validate()校验时，需要prop属性绑定校验项的字段名，如上图所示。 如果prop属性不绑定name这个字段
Vue3 | Element-Plus | 表单校验 | form | Validate|提交时调用validate()函数
weixin_53377575的博客
11-16 5660
【代码】Vue3 | Element-Plus | 表单校验 | form | Validate。
vue-element-plus-admin中的表单，验证非必填项以及多个必填项
weixin_45346457的博客
05-08 678
【代码】vue-element-plus-admin中的表单，验证非必填项以及多个必填项。
elmentui表单验证的validate(全部验证)validateField(局部验证)
CHENC0518的博客
04-16 9964
1.validate,对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise,Function(callback: Function(boolean, object)) 2.使用用例: submitResForm(formName) { this.$refs[formName].validate((valid) => { if (valid) {
Vue3(ts)使用vee-validate表单校验，自定义全局验证规则
z001126的博客
03-01 749
在utils目录下新建一个validate.ts文件（这里我使用的是ts，如果用js就创建js文件），内容示例如下：if (!value ||!return '该字段不能为空';});if (!value ||!return '邮箱地址不能为空';if (!return '请输入有效的邮箱地址';});然后在main.ts里引入。
VUE3使用element-plus表单验证
05-28
在 Vue3 中使用 Element Plus 进行表单验证，需要先安装 Element Plus 和 VeeValidate（Element Plus 依赖于 VeeValidate）。安装命令如下： ``` npm install element-plus vee-validate@next ``` 安装完成后，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

船长在船上

您的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值