el-form中rules的原理简介

最新推荐文章于 2024-07-16 11:10:04 发布
最新推荐文章于 2024-07-16 11:10:04 发布
阅读量5.2k 收藏 2
点赞数 1
分类专栏： element-ui 前端之路
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/txyzqc/article/details/110468278
版权

一直以来我都没有搞懂el-form的rules究竟是怎么工作的，我只是按照文档画瓢而已。这次有个需求把界面上的el-select替换成树形的下拉框，只能自己封装了，同时这里用到了rules，没办法我只能让自定义的树形组件(我取名叫DropdownTree)支持rules了。可是我对这个一无所知！！！

把拉代码吧，还能怎么办呢？

经过艰苦卓绝的一个小时，总算搞懂了。我下面尝试总结一下

当表单元素（比如el-input），在value变化或blur时，会触发el.form.change和el.form.blur到ElFormItem，这是使用emitter.js中的dispatch实现的。ElFormItem就会调用自身的validate方法来做验证。validate方法借助了AsyncValidator，这个是一个第三方包，这里就不讨论了。

AsyncValidator的验证需要我们传入验证规则，ElFormItem怎么获取验证规则的呢？它会综合ElForm上的rules和自己的rules，以及ElFormItem上的required字段生成一个规则数组，这里要说一下ElForm上的ElFormItem上的rules是互斥的，后者的优先级高。

接下来再提一下ElForm.validate的实现，它会调用所有设置了prop的ElFormItem的validate。

如果要实现自己的表单元素，并且支持rules的话，需要在自己的表单组件中emit出el.form.change和el.form.blur事件。

如果有帮助，请点赞哦:)

nothing_more_than
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
el-form 多层级表单的实现示例
10-14
在文档中，提到的几个关键的el-form属性如下： 1. ref：这个属性类似于HTML元素的id，用于引用DOM元素或组件实例。 2. model：对应一个JavaScript对象，表单数据对象，用于保存表单各字段的数据。 3. rules：包含...
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
在本场景中，使用了Element UI库的`el-form`组件来构建表单，它提供了丰富的表单元素和表单验证功能。在实现添加和编辑功能时，一个常见的挑战是如何在表单提交后清空数据，以便用户可以进行下一次操作，比如添加新...
ElementUI使用rules点击按钮校验表单和单独校验某个表单元素
a17603952050的博客
04-08 6147
一、校验rules中所有元素 写在 data 中验证 表单内容 <!-- 表单 --> <el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px"> <el-form-item label="用户名称:" prop="userName"> <el-input v-model="rulesForm.userName" style="wi
ElementUI中el-form组件的rules参数详解
changwen17的博客
02-16 7226
ElementUI中el-form组件中rule规则详细介绍
element ui中el-form-item的属性rules的用法
最新发布
每天都要努力学习哦~~
07-16 1708
在使用Element UI的el-form组件进行表单验证时，如果同时在el-form上绑定了rules，并且在单独的上也绑定了rules，那么Element UI会将两者的规则合并使用。具体来说，对于同一个字段，如果el-form和都有对应的验证规则，那么上的规则会覆盖el-form上的规则。el-form的rules：这是表单级别的验证规则，适用于表单内所有字段。如果表单中的某个字段没有在el-form的rules中明确指定规则，那么它将不会进行验证。el-form-item的rules。
el-form自定义规则rules——validate的使用 & 小红心不出现解决方案
weixin_44867717的博客
07-03 1万+
el-form
VUE el-form表单中rules校验方法实现
weixin_44078774的博客
11-24 1589
在el-form中正确使用rules校验是非常重要的，rules使用不当容易出现规则不生效、规则一直被触发等各种现象（如错误信息一直提示不得为空）。下面记录了常见的rules实现方式，以做参考。
Vue3表单组件el-form校验规则rules属性
李长渊的博客
06-13 2164
Vue3表单组件el-form校验规则rules属性
vue elementui el-form rules动态验证的实例代码详解
10-16
在使用elementUI el-form 中，对于业务不同的时候可能会产生不同表单结构，但是都是存在同一个表单控件el-form中。这篇文章主要介绍了vue elementui el-form rules动态验证的实例代码,需要的朋友可以参考下
el-form 动态控制rules是否校验
xiaokangna的博客
07-27 4664
需要主要数字是字符串还是数字类型，假设以这个是和否为例，只有为是的时候才触发校验，那么就设置为当这个参数为1的时候才触发校验，这种方法是最简单的，如果你的校验是在标签里的话，那么就需要另外设置，那么请往下看。那么此时的校验判断就应该写在标签内，比如下图这样，但是为1后的rules应该要精确到他的指定属性，如果prop是name，那他就应该是rules.name。工作日常分享今天一个朋友问我，他有一个需求，就是怎么去动态控制表单的校验，下面图片举例，假设只有为是的时候才需要去校验，这种情况下要怎么处理。...
＜el-form＞的rules
weixin_46883630的博客
09-26 1016
el-form标签的使用
结合表单验证谈el-form中model、prop、rules属性
热门推荐
m0_52711377的博客
03-24 1万+
目录前言modelproprules验证总结 前言 最近写vue项目需要用element ui中的表单组件显示一些信息呈现在页面上，但在使用提供的一些属性时有些困惑——这三者之间有什么关系，必须要同时存在吗？于是在这里做一些记录。 model 官方说是表单中的数据对象，于是有 <el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-form-item label="用户名" prop="name"
el-form表单rules验证
ProgrammingWhite的博客
03-22 770
今天在工作中遇到一个小问题，绑定的rules验证出现一个小Bug，验证规则和绑定的表单都正确，但是为什么输入完信息之后还是会提示错误输入时候的提示信息？ Bug重现：项目联系人只添加一个require验证规则，在输入框中我明明输入进去了，但是为什么还是会提醒我错误提示信息？ 找了一会原因发现是因为el-form-item中的prop和ref用错了，prop是form表单绑定的formInfo对象中第一层的数据，ref是form表单绑定rules时为了确认验证的某一项而临时建立的连接。 el-inp
elform 动态 rules
carbonzhao的专栏
05-03 4284
前端由于某些需求场景需要，部分表单的渲染是通过 v-for循环渲染显示，此时如何实现表单验证呢？如下，点击第一行的+号可以动态的增加更多行表单，不同于单一固定的表单行[参见下文一般情况下]，我们可以通过固定的prop绑定来验证，多行动态时，则无法使用原有方案进行验证！！！页面代码实现如下：注意:此处的el-form-item管理着三个表单元件！！提示时只使用一个el-form-item携带的提示框！！！其核心代码块则为：不需要指定prop，内部直接使用遍历的item访问其值做出判断给出反馈信息即可。
el-form 自定义rules 校验规则
fangcaojushi的博客
12-12 965
包括 https的url地址、小写、大写、大小写英文字母、电子邮件、电话号码、是否合法IP地址、身份证号等的校验例如：再次确认密码的，在data中定义一个const 常量，在rules中引入data(){// 定义规则 (rule, value, callback)callback(new Error('两次输入的密码不一致'))} else {callback()} else {callback(new Error('请再次输入密码'))...rules:{oldPass: [
三分钟细数 el-form 表单校验的坑点，前车之鉴，可助你避坑
本博客纯属个人网络笔记，如对阁下有用，甚喜；否则，关掉即可，不喜勿喷。专心写代码，不做键盘侠！
10-12 1万+
Vue 的 el-form 提供了表单校验功能，通过 :rules 属性设置校验规则，并通过 el-form-item 的 prop 属性绑定校验规则。通过封装，让前端校验更方便。具体使用过程中，有几个容易出错的地方，本文来整理一下。每一个坑都是笔者亲自趟过的，写完本文后，以后应该不会再踏入相同的坑。...
el-form的表单验证 rules 必填 且为纯数字
m0_52244931的博客
02-13 2774
el-form的表单验证 rules 必填 且为纯数字
el-form rules表单验证失效问题解决
Ahuuua的博客
11-24 9167
el-form-item中prop属性必须要有才能找到需要验证的字段，另外prop需要与el-input中v-model的参数名称一致，否则会导致rules功能消失 @click中的事件需传入表单名（ref的名称），如@click=submit('taskForm')，js部分点击事件使用方式 submit(taskForm){ this.refs[taskForm].validate(valid=>{ if(valid){} else{} ..
el-form的rule无法校验（没有效果）的几个注意点
weixin_42554373的博客
07-02 3257
【代码】el-form的rule无法校验（没有效果）的几个注意点。
el-form中el-tree的rules校验
09-09
在el-form中，el-tree的rules校验可以通过在el-form-item中设置prop属性和在data()中设置Rules属性来实现。在Rules中，可以定义一个验证函数validOrgan，并将其作为validator属性的值。该验证函数可以通过this.$refs.organTree.getCheckedKeys()方法获取选中节点数组，然后判断数组是否为空来进行校验。如果数组为空，说明没有选中节点，则回调(callback)一个带有错误信息的对象；否则，回调一个空对象表示验证通过。在el-form-item中，可以设置trigger属性来指定触发校验的事件，如'change'事件。最后，在el-form中使用rules属性来绑定Rules对象。 例如，可以在data()方法中添加如下代码： ``` data() { let validOrgan = (rule, value, callback) => { let arr = this.$refs.organTree.getCheckedKeys(); if (!arr || arr.length === 0) { callback(new Error('请选择关联机构')); } else { callback(); } } return { Rules: { organList: [ { required: true, validator: validOrgan, trigger: 'change' } ] } } } ``` 然后，在el-form-item中设置prop属性为'organList'： ``` <el-form-item prop="organList"> <el-tree ref="organTree" ... ></el-tree> </el-form-item> ``` 最后，在el-form中使用rules属性绑定Rules对象： ``` <el-form :rules="Rules"> ... </el-form> ``` 这样就可以实现el-form中el-tree的rules校验了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值