el-form中rules的原理简介

最新推荐文章于 2025-04-14 13:48:04 发布
原创 最新推荐文章于 2025-04-14 13:48:04 发布 · 5.4k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

博主因需求需让自定义树形组件支持el-form的rules，经研究发现，表单元素在value变化或blur时，会触发相关事件到ElFormItem，其调用validate方法验证，借助AsyncValidator。ElFormItem综合多方面生成规则数组，ElForm.validate会调用设置prop的ElFormItem的validate，自定义组件需emit特定事件。

一直以来我都没有搞懂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事件。

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

vue2表单校验：el-form表单绑定数组并使用rules进行校验
l_q_l的专栏
08-17 5688
1、在el-form中指定rule，可引用data或compute中集中定义的rules，也可以每一条item中单独定义自己的rule2、另外，花费1天的时间买来的教训：如果rules集中写，在el-form中已经引用了，那么在el-form-item中不能重复引用，否则console中不会报错，但是，rules将不起作用，且提示 people is not a string，即便在rules中添加了 type: 'array' 也不行。如下写法是错误的。​。
14 使用Vue + el-form + rules实现图书信息录入功能实战
xingyu_qie的专栏
07-18 2566
这一节，使用ElementUI的el-form和rules进行，图书信息录入前的验证工作
element ui中el-form-item的属性rules的用法
每天都要努力学习哦~~
07-16 7023
在使用Element UI的el-form组件进行表单验证时，如果同时在el-form上绑定了rules，并且在单独的上也绑定了rules，那么Element UI会将两者的规则合并使用。具体来说，对于同一个字段，如果el-form和都有对应的验证规则，那么上的规则会覆盖el-form上的规则。el-form的rules：这是表单级别的验证规则，适用于表单内所有字段。如果表单中的某个字段没有在el-form的rules中明确指定规则，那么它将不会进行验证。el-form-item的rules。
Element UI 中表单元素的验证机制
小海前端
12-08 2254
文章目录前言一、Element UI中表单元素的验证规则二、async-validator 的验证规则1、required2、type3、enum4、message5、trigger6、min、max7、len8、pattern9、validator三、两个官网案例总结 前言 Element UI 框架中的表单验证使用 async-validator（异步校验）第三方库实现，该库在 GitHub 的地址是 https://github.com/yiminghe/async-validator，至今在 Git
＜el-form＞的rules
weixin_46883630的博客
09-26 1244
el-form标签的使用
Vue3表单组件el-form校验规则rules属性
李长渊的博客
06-13 5603
Vue3表单组件el-form校验规则rules属性
vue elementui el-form rules动态验证的实例代码详解
10-16
在使用elementUI el-form 中，对于业务不同的时候可能会产生不同表单结构，但是都是存在同一个表单控件el-form中。这篇文章主要介绍了vue elementui el-form rules动态验证的实例代码,需要的朋友可以参考下
el-tree在el-form中通过rules进行校验
博哥的二进制世界
06-15 3293
el-tree在el-form中通过rules进行校验背景正确配置el-tree的rules校验 背景 如下图，在el-form中想实现el-tree的校验，elementUI并没有提供相关的示例。 如果是按照通常的方法配置rules,无论是否选择el-tree的选项，都会报错，提示请选择功能权限配置，这说明如果按照这种方法来配置el-tree的rules，是错误的 addRoleFormRules: { permissionIdList: [ { type: 'array', required
vue elementUI form组件动态添加el-form-item rules且支持添加自定义校验方法
.伊泽瑞尔
04-12 1909
vue elementUI form组件动态添加el-form-item rules且支持添加自定义校验方法
ElementUI使用rules点击按钮校验表单和单独校验某个表单元素
a17603952050的博客
04-08 6961
一、校验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
Vue表单组件el-form校验规则rules属性
2203_75372944的博客
10-18 3634
rules是一个对象，其中每个键对应表单中的一个字段名，值是一个数组，数组中的每个元素代表对该字段的一个校验规则。
el-form 自定义rules 校验规则
fangcaojushi的博客
12-12 3144
包括 https的url地址、小写、大写、大小写英文字母、电子邮件、电话号码、是否合法IP地址、身份证号等的校验例如：再次确认密码的，在data中定义一个const 常量，在rules中引入data(){// 定义规则 (rule, value, callback)callback(new Error('两次输入的密码不一致'))} else {callback()} else {callback(new Error('请再次输入密码'))...rules:{oldPass: [
el-form表单rules验证
ProgrammingWhite的博客
03-22 977
今天在工作中遇到一个小问题，绑定的rules验证出现一个小Bug，验证规则和绑定的表单都正确，但是为什么输入完信息之后还是会提示错误输入时候的提示信息？ Bug重现：项目联系人只添加一个require验证规则，在输入框中我明明输入进去了，但是为什么还是会提醒我错误提示信息？ 找了一会原因发现是因为el-form-item中的prop和ref用错了，prop是form表单绑定的formInfo对象中第一层的数据，ref是form表单绑定rules时为了确认验证的某一项而临时建立的连接。 el-inp
VUE el-form表单中rules校验方法实现
weixin_44078774的博客
11-24 2294
在el-form中正确使用rules校验是非常重要的，rules使用不当容易出现规则不生效、规则一直被触发等各种现象（如错误信息一直提示不得为空）。下面记录了常见的rules实现方式，以做参考。
ElementUI中el-form组件的rules参数详解
changwen17的博客
02-16 8696
ElementUI中el-form组件中rule规则详细介绍
el-form中的rules校验
weixin_47156901的博客
09-15 4092
el-form中的rules不起作用问题描述：检查步骤： 问题描述： 写了prop标签但是在输入框填写输入后，还是提示请输入**** 检查步骤： 1.先确定prop属性是否写在了标签后面 2.检查表单的rule是否写了 3.检查prop的值是否和v-model的值保持一致（最关键的检查） 4.r如果是双重的则需要写成双重的（谨记prop的值和v-model的值保持一致） 5.校验写法 红色的是单个校验，一个字符 绿色的双重（prop的值不是一个单词。而是对象里面的一个值） ...
el-form自定义规则rules——validate的使用 & 小红心不出现解决方案
热门推荐
weixin_44867717的博客
07-03 1万+
el-form
Vue表单组件el-form校验规则rules，条件判断rules表单验证显示必填或非必填
最新发布
Aotman_的博客
04-14 1654
在使用 Element UI（一个基于 Vue 的前端框架）的表单验证功能时，你可能想要实现一个规则，使得某些字段在特定条件下成为必填项，或者在满足某些条件时不允许为空。这通常通过自定义校验规则来实现。
el-from 使用 rules自定义表单验证规则
zhang_yong_hui的博客
03-07 1277
string: 必须是stringnumber: 必须是numberboolean: 必须是booleanmethod: 必须是functionregexp: 必须是正则或者是在调用new RegExp时不报错的字符串.integer: 整数.float: 浮点数.array: 必须是数组，通过判断.object: 是对象且不为数组.enum: 值必须出现在enmu枚举值中.date: 合法的日期，使用Date判断url: url.hex: 16进制.email: 邮箱地址.}]
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、付费专栏及课程。

余额充值