el-form 的动态 el-form-item 校验

最新推荐文章于 2024-12-24 16:29:29 发布
原创 最新推荐文章于 2024-12-24 16:29:29 发布 · 197 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

本文详细介绍了如何在Vue的el-form组件中使用v-for进行动态绑定，并展示了一个利用`prop=formItemArr.[index].name`实现表单项校验的代码示例。
晓欲望！
关注
el-form动态表单的校验问题
全栈科学家的博客
05-30 1261
el-form-item label="份数：" :prop="`formRow.${index}.three`" :rules="rules.three">prop绑定one,two,three?
【ElementUI 表单校验】一个 el-form-item 下多个表单校验（循环校验）
前端知识分享喵
06-07 4687
前端开发项目的过程中，批量表单循环校验是很常见的，如上图，动态添加奖励计算规则，把所有的表单放到了一个 el-form-item 下。也可以理解为 el-form-item 做了嵌套，外层当然也可以省略，样式做微调，下面通过代码来详细的看一下。不足之处，多多交流。
element-ui 的FormItem组件是如何进行绑定值校验的【源码解读】
vet_then_what的博客
11-09 2418
使用element-ui框架有两年了，涉及到el-form组件的校验，只是根据官网给的示例使用。el-form绑定model，绑定prop属性，内的表单绑定v-model。只要v-model绑定的属性与prop属性一致再加上各种校验规则，即可实现某个表单的校验。所以个人就下意识的以为一定要用v-model绑定某个值才能实现校验，在封装自定义组件时，就会下意识的用组件实现v-model绑定值的功能。但是有次在使用同事封装的组件时，他并不是使用的v-model绑定的，而是用:xxx.sync。
vue el-form-item :rules动态校验实现
qq_43805205的博客
07-19 2827
【代码】vue el-form-item :rules动态校验实现。
el-form中使用v-model和prop实现动态校验
java程序员的蜕变之路
08-23 2215
公式： 动态校验项的v-model的绑定值 = el-form的属性 :model的值 + '.' + :prop属性的值以此反推 :prop属性的值此公式适应与element、element-plus、ant-design-vue组件库的表单校验场景：本文是三种表单校验1.多个变量控制某一项校验2.对于数组for循环，校验每一项3.对于两个不同的字段，分别v-if显示隐藏的校验1. required: true 会有 * ， 但仅是触发最后点击提交按钮时，校验某一项位必填；
el-table嵌套 el-form并且加正则校验
06-15
el-table 封装组件
vue elementUI form组件动态添加el-form-item rules且支持添加自定义校验方法
.伊泽瑞尔
04-12 1878
vue elementUI form组件动态添加el-form-item rules且支持添加自定义校验方法
el-form-item不显示报错$option；label和input不是行内样式显示；el-form表单校验不生效；el-form表单校验正则
killerdoubie的博客
02-27 1474
el-form-item不显示报错$option;label和input不是同行显示；el-form表单校验不生效；el-form表单校验正则
el-form动态标题和输入值，并且最后一个输入框不校验
请叫我欧皇！的博客
09-18 560
需求：给了固定的label，叫xx单位，要输入单位的信息，但是属性名称都一样的，UI画图也是表单的形式，所以改为动态添加的形式，实现方式也很简单，循环就完事了，连着表单校验也动态。
vue elementui el-form rules动态验证的实例代码详解
10-16
在使用elementUI el-form 中，对于业务不同的时候可能会产生不同表单结构，但是都是存在同一个表单控件el-form中。这篇文章主要介绍了vue elementui el-form rules动态验证的实例代码,需要的朋友可以参考下
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
最新发布
web13093320398的博客
12-24 2018
【代码】vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法。
el-form循环el-form-item多个类型input并进行动态验证
weixin_50903388的博客
03-07 2118
【代码】el-form循环el-form-item多个类型input并进行动态验证。
el-form-item动态验证规则
real_xiaobai的博客
10-18 943
<el-form> <el-form-item label="培训测评" prop="isEvaluation"> <el-radio-group v-model="form2.isEvaluation"> <el-radio :label="1">是</el-radio> <el-radio :label="2">否</el-radio>
element ui el-form-item动态渲染添加验证
曲小强
07-21 779
代码】elementuiel-form-item动态渲染添加验证。
elementUI动态嵌套el-form表单校验
小绵杨
03-19 8188
前端项目开发过程中表单校验是非常常见的需求，elementUI的el-form组件也是支持配置rules属性来配置表单项的校验。 Form 组件允许你验证用户的输入是否符合规范，来帮助你找到和纠正错误。 Form 组件提供了表单验证的功能，只需为 rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可。
使用el-form时循环内容动态校验处理
想退休的程序媛
08-02 688
有的需求不固定form表单中存在什么，而是通过接口内容进行查询后赋值，这种情况就涉及了每一个el-form-item的动态校验问题，在这种情况下想要校验自动出现必填标识，未填写时可以在输入框下面进行提示。此处拿下面数据结构进行下面代码的演示，使用时根据各自需求进行优化。
vue3 动态校验el-form表单
2401_82544359的博客
01-10 1857
动态校验form表单项
el-form表单多项控制校验；el-form表单新增表单项动态校验；el-form校验动态表单v-if不生效；
热门推荐
i_am_a_div的博客
06-30 1万+
el-form表单新增表单项动态校验；el-form校验动态表单v-if不生效；
el-form表单动态校验(场景: 输入框根据单选项来动态校验表单 没有选中的选项就不用校验)
qq_41421033的博客
09-07 3168
关键点: 跟正常校验流程不同的是, el-form-item标签内的required和rules都要加上判断条件。场景: 输入框根据单选项来动态校验表单。没有选中的选项就不用校验。正题部分-表单动态校验。
el-form-item 动态绑定rules校验规则
08-19
您可以使用动态绑定的方式来实现el-form-item的校验规则。首先，您需要在data中定义一个rules数组，用于存储不同字段的校验规则。然后，在el-form-item中使用:rules属性来动态绑定对应字段的校验规则。 下面是一个示例： ```html <template> <el-form :model="form" ref="form"> <el-form-item label="用户名" prop="username" :rules="rules.username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password" :rules="rules.password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' } ] } }; }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { // 表单校验通过，提交表单 // TODO: 提交逻辑 } else { // 表单校验不通过，显示错误提示 } }); } } }; </script> ``` 在上述示例中，我们使用了一个form对象来绑定输入框的值，并在data中定义了一个rules对象来存储校验规则。在el-form-item中，使用:rules属性来动态绑定rules对象中对应字段的校验规则。最后，在submitForm方法中，通过this.$refs.form.validate()方法来触发表单校验。 希望能对您有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值