Element-Plus中自定义组件触发el-form表单验证

最新推荐文章于 2024-03-31 17:05:52 发布

夜雨Gecer

最新推荐文章于 2024-03-31 17:05:52 发布

阅读量740

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_39370093/article/details/132826239

版权

import { useFormItem } from 'element-plus'

const { formItem } = useFormItem()

formItem?.validate('change')

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

夜雨Gecer

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Element-Plus中自定义组件触发el-form表单验证

【代码】Element-Plus中自定义组件触发el-form表单验证。
复制链接

扫一扫

Vue自定义组件使用Element-ui表单校验

qq_42731434的博客

07-17

2391

一般情况下(form中的组件都是element提供的组件)在使用elm的表单校验时我们是这么使用的：// 栗子.vue <template> <el-form :model="formData" :rule="rules" ref="formRef"> <el-form-item prop="inputValue"> <el-input v-model="formData.inputValue"></el-

html-element-plus:自定义Web组件帮助器框架

05-18

我一直在一个方便的类中重新实现一些自定义元素。我已经将HTMLElement扩展为HTMLElementPlus以包含我不断重新实现的功能。例子 import HTMLElementPlus from '...

参与评论您还未登录，请先登录后发表或查看评论

element plus 自定义表单控件触发校验

Holly1945的博客

08-12

1423

emit,mitt,element plus

Vue ElementPlus Form、Form-item 表单

最新发布

小楼一夜听春雨，深巷明朝卖杏花

03-31

2088

每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据，组件升级采用了 flex 布局，以替代旧版本的 float 布局。包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。属性传入约定的验证规则，并将 Form-Item 的。Form 组件提供了表单验证的功能，只需要通过。

VUE3基于element-plus二次开发的表单内容组件或者自定义的表单内容组件无法自动触发表单校验问题

qq_36641900的博客

04-13

1549

这只是最简单基于输入框二次封装的一个例子，可能有人说，他的能触发，这个我们不深究，因为确实有能触发的情况，但是我们做的项目可能定制程度比较高，中间逻辑有些复杂，就不能触发表单的校验规则了，不论规则配置的trigger值是change或者blur或者其他事件，都不能正常触发。对于自定义组件或者二开组件还有一种情况是可能需要用到表单上绑定的一些属性，比如form的size等内容，可以通过依赖注入的方式拿到，key是Symbol值，因为Symbol的特殊性，你必须从element-plus内引入这个值。

el-form 触发单个校验

string佳佳的博客

07-11

3616

el-form 触发单个校验

vue + element UI 表单中内嵌自定义组件的表单校验触发方案

朝阳39的博客

11-21

1288

在表单中，可能部分表单项需封装成自定义组件，如何在表单提交时，能同步触发自定义组件的表单校验？

element-plus自定义组件如何自动触发表单校验

编程似海、

03-14

3070

自定义复杂类型的组件如何自动触发表单校验

element-plus-2.2.12 本地资源文件

08-01

element-plus-2.2.12 本地资源文件，适用于Vue 3编程，是流行的Vue 3的组件库。资源适用于离线开发，内网使用。（本资源为 element-plus-2.2.12 保存而来，如有侵权请联系我删除。）

element-ui中select组件绑定值改变,触发change事件方法

10-18

今天小编就为大家分享一篇element-ui中select组件绑定值改变,触发change事件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

element-plus(element-plus@2.5.5) 本地离线资源

02-05

element-plus@2.5.5 本地离线资源，适用于没有网络连接、搭建自己的cdn等用途。 All files（包含文件） /npm/element-plus@2.5.5/dist /npm/element-plus@2.5.5/es /npm/element-plus@2.5.5/lib /npm/element-...

Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序

06-15

重用现有element-plus组件库。对于小白来说怎么在Vuedraggable里使用element组件提供了实际应用参考。table样式完全模拟了el-table组件样式。看官方文档两天也不如直接看一个完整的实例。需要安装依赖：npm i -S ...

element el-form-item循环创建验证和自定义规则验证

weixin_57232850的博客

02-20

355

写一个一个简单dome。

Vue系列---【使用js给elmentui组件中的el-from-item添加点击事件】

-少年-的博客

04-21

743

1.问题当选完值之后，实现点击其他地方能隐藏掉这个el-tree树。由于el-form-item这个元素本身不带失焦事件，所以我想到了，使用js给el-form-item添加点击事件，只要点击的范围不在el-form-item里面，就隐藏掉这个el-tree。 2.解决方案 2.1给el-form-item添加一个id 　　　　　　　　　　　<el-form-item label=...

elementplus中form表单的使用及讲解---快速上手

qq_56263094的博客

05-02

8096

这篇仅仅对于初学者，因为纯个人理解，后端er只需要会用就好啦贴一个elementplus的官网Form 表单 | Element Plus (element-plus.org) 1.初识elementplus的form表单 <template> <el-form :model="form" label-width="120px"> <el-form-item label="Activity name"> <el-inpu....

vue3 +element-plus中避免一打开表单的下拉选择的change事件自动校验问题

stay hungry, stay foolish

08-31

2069

新增和编辑共用一个弹窗时，每次打开新增弹窗，el-select的表单项会触发change事件的自动校验。我这里的下拉选择是支持多选的，也就是属性上有multiple。

在elementUI中触发el-form中的某一个校验

m0_73533910的博客

03-24

2290

如果想单独触发form表单中的某一项校验，可使用下面语句，其中括号里的是和el-form-item中的prop一致。如果是涉及到编辑回填的校验，最好写在$nextTick()中，不然validateField会报错。在form表单中用ref绑定form。

[elementui]form表单先编辑后新建form自动触发校验

qubes的专栏

04-03

1166

element form表单先编辑后新建form自动触发校验。

如何在vue3 + ts 环境下使用 element-plus 的 from表单，并进行验证

文静静的博客

09-26

4778

① 创建<el-form>和<el-form-item> ② elform配置，重点是需要:model 和 ref。rules和官网一致就可以 <el-form label-position="left" label-width="formWidth" ref="loginForm" :model="inputValue" :rules="rules" > ③ el-f...

在Vue3中使用element-plus,如何进行el-form的表单验证

04-19

可以使用Vue3中内置的v-model以及element-plus中提供的el-form和el-form-item组件，设置相应的验证规则和提示信息即可。示例代码如下： ```html <template> <el-form ref="form" :model="formData" :rules="formRules"> <el-form-item label="用户名" prop="username"> <el-input v-model="formData.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="formData.password" type="password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> import { ref } from 'vue'; import { ElMessage } from 'element-plus'; export default { name: 'FormValidation', setup() { const formData = ref({ username: '', password: '', }); const formRules = ref({ username: [{ required: true, message: '请输入用户名', trigger: 'blur', }], password: [{ required: true, message: '请输入密码', trigger: 'blur', }], }); const submitForm = () => { // 提交表单操作 const form = ref('form'); form.value.validate((valid) => { if (valid) { // 验证通过执行提交操作 ElMessage.success('提交成功'); } else { ElMessage.warning('请填写完整信息'); return false; } }); }; return { formData, formRules, submitForm, }; }, }; </script> ``` 在这个示例中，我们使用了ref来创建响应式对象formData和formRules，formData用于存放表单数据，formRules用于存放表单的验证规则。 el-form组件作为表单容器，通过ref="form"指定参考名称，然后通过:model绑定formData数据模型，用:rules绑定表单验证规则。 el-form-item组件作为表单元素的包裹容器，通过label属性指定标签文字，再使用prop属性命名表单元素的key，与表单验证规则对应。验证规则定义可包括以下属性： - required：表示是否为必填字段 - message：表示验证不通过时的提示信息 - trigger：表示触发验证的事件，默认为blur 最后，在提交表单时，我们使用validate方法对表单进行验证，需要在回调函数中判断验证结果并作出相应操作。

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交