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 5256
关键代码 // 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.0-element-admin:基于vue3.0和element-plus开发的企业后台管理模板
03-30
element_vue3.0 / VE-Admin 项目简介基于vue3和element-plus开发的企业后台管理模板。功能特性项目使用了最新的vue3全家桶+元件加+ mockjs + Axios公司+ eChart5。项目继成了mockServe，可脱离后端自主开发测试对...
element plus自定义组件表单校验
weixin_36878452的博客
01-14 1110
【代码】element plus自定义组件表单校验。
基于Vue3+Element Plus 实现多表单校验
最新发布
gaotlantis的博客
06-17 736
*** 多表单校验 async await / Promise.all()* 在 Vue 3 中使用 addFormRule.value.validateField() 方法返回的可能是一个 Promise，* 这是因为许多表单验证库（如 VeeValidate 或 Element Plus 等）在进行异步验证时会返回 Promise 以便处理异步操作。在这种情况下，validateField 方法会返回一个 Promise，而不是直接返回一个布尔值。
Vue3 | Element-Plus | 表单校验 | form | Validate|提交时调用validate()函数
weixin_53377575的博客
11-16 5971
【代码】Vue3 | Element-Plus | 表单校验 | form | Validate。
vue =＞ 温故知新 element表单校验 异步编程终极方案Async await
Write less，do more
01-18 1267
Element的表单校验补充 我们尝试通过一个案例对Element的表单校验进行一下补充 实现表单基本结构 创建项目 $ vue create login 选择babel / eslint 安装Element 开发时依赖 ： 开发环境所需要的依赖 -> devDependencies 运行时依赖: 项目上线依然需要的依赖 -> dependencies $ npm i element-ui 在main.js中对ElementUI进行注册 import ElementUI from
vue3+setup+validator验证两次输入密码是否一致（土法）
m0_67987829的博客
11-01 3090
vue3+validator验证两次输入密码是否一致
element 中表单 validateField方法部分校验遇到的坑
weixin_43839531的博客
08-30 3889
Step1() { this.$refs.dataForm.validateField(this.field, (valid) => { if (!valid) { // 校验通过进行的操作 } }) }, // 多个字段需要校验时候 上面写法一个字段校验通过即可进入if,并没有校验全部字段，改下面写法： Step1() { const validateList = ...
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-element-admin-ts::party_popper: 基于 vite + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus+Typescript 的后台管理系统vue3-element-admin-ts
04-07
vue3-element-admin:party_popper: 基于 vite + vue3 + Vue-Router 4.0 + Vuex 4.0 + element-plus + typescript 的后台管理系统简介 是一个后台前端解决方案，它基于 和 实现。它使用了最新的前端技术栈，vite + ...
vue3.0 + ts + bootstrap封装elementui的form表单的验证效果ValidateFrom
峰会路转的博客
07-15 1473
表单验证在我们前端开发中是经常要用到的业务需求，在日常开发中会大量的使用!那么，我们每天都在使用的这种验证表单是如何封装实现的呢？今天我们就对这个组件的封装来进行研究学习。 首先看下elementui的效果 使用方法就不说了，可以仔细阅读使用文档 宇宙门: elementui官网 下面是我们今天要展示的自己封装的效果，是此次的重点！ 相关的技术栈是vue3.0+ts+bootsrap(借用她的样式) 正常的情况下展示 直接点击提交的时候,值为空所以会进行校验 输入完符合要求的内容,在点击提交的时候错误
vue3+ts,form表单校验实现步骤记录，与asyncValidator自定义验证规则
weixin_46689373的博客
01-11 2084
vue3+ts,form表单校验实现步骤记录，与asyncValidator自定义验证规则
vue3.0手动封装消息提示框
萌萌的博客
09-23 2037
封装消息提示框1.使用场景2.提示组件 message.vue3.滑动效果4. 通过方法的形式调用 1.使用场景 场景还是比较多的 例如常见的登录、做一些功能发送失败的ajax都可以用弹框提示 2.提示组件 message.vue <template> <div class="xtx-message" :style="style[type]"> <!-- 上面绑定的是样式 --> <!-- 不同提示图标会变 --> <i
vue3 使用element-plus 表单校验
hero_th的博客
09-28 6095
vue3 没有this！vue3 没有this！vue3 没有this！ template <el-form label-position="top" ref="loginformRef" label-width="100px" :model="loginform" hide-required-asterisk > <el-form-item prop='username' label="username" :rules="[ { .
Vue3.0常见报错解决整理
清风明月的博客
02-02 2228
1.报错：This dependency was not found: vue-router in ./src/router/Index.js 原因：vue-router 没有安装 运行：npm install --save vue-router 2.报错：Failed to resolve loader: less-loader You may need to install it. 或者Syntax Error: Error: Cannot find module ‘less’ 原因：less-
[后台系统]element plus自定义表单规则时，不执行 validate校验
qq_41228905的博客
03-07 1806
使用技术为vue3+element plus，以下内容为个人理解，如有错误请指正。 解决办法 在自定义规则方法中，不管判定成功或者失败，都需要去调用callback，否则不执行element的validate表单校验。 // 数字校验规则 const numberRule = (rule, value, callback) => { const num = Number(value) if (!isNaN(num) &&
vue3表单验证
kanno的博客
02-12 553
vue3+ts+el表单验证
VUE3使用element-plus表单验证
05-28
在 Vue3 中使用 Element Plus 进行表单验证，需要先安装 Element Plus 和 VeeValidate（Element Plus 依赖于 VeeValidate）。安装命令如下： ``` npm install element-plus vee-validate@next ``` 安装完成后，可以在 main.js 中引入并注册 Element Plus 和 VeeValidate： ```javascript import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' import VeeValidatePlugin from './plugins/vee-validate' import App from './App.vue' const app = createApp(App) app.use(ElementPlus) app.use(VeeValidatePlugin) app.mount('#app') ``` VeeValidate 需要在 plugin 中进行注册。可以先创建一个 plugins 文件夹，然后在其中创建一个 vee-validate.js 文件： ```javascript import { defineRule, configure } from 'vee-validate' import { required, email } from '@vee-validate/rules' export default { install: (app) => { // 配置 configure({ generateMessage: ({ field, rule }) => { const messages = { required: `${field}不能为空`, email: `${field}格式不正确` } return messages[rule] } }) // 定义规则 defineRule('required', required) defineRule('email', email) } } ``` 这里定义了两个规则：required 和 email。然后在组件中使用： ```html <template> <el-form :model="form" :rules="rules" ref="form" label-width="100px"> <el-form-item label="邮箱" prop="email"> <el-input v-model="form.email"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> import { reactive } from 'vue' import { useVeeValidate } from '@vee-validate/vue3' export default { setup() { const { form, handleSubmit, validate } = useVeeValidate({ initialValues: { email: '' } }) const rules = { email: 'required|email' } const submitForm = () => { validate().then((result) => { if (result.valid) { console.log('提交成功') } }) } return { form, rules, submitForm } } } </script> ``` 这里使用了 VeeValidate 提供的 useVeeValidate hook，它返回了一个 form 对象、handleSubmit 方法和 validate 方法。form 对象包含了表单的所有数据，handleSubmit 方法用于提交表单，validate 方法用于验证表单。rules 对象定义了表单验证规则。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

船长在船上

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

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

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

打赏作者

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

抵扣说明：

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

余额充值