el-form自定义校验规则,
在项目开发中，我们经常会遇到保存表单的功能。本文主要介绍在v-for中动态检查el表单项的实践。通过示例代码进行了非常详细的介绍，对大家的学习或工作有一定的参考价值。下面让我们跟随边肖一起学习。
目录
问题描述效果图代码思路完整代码
问题描述
在项目开发中，我们经常会遇到保存表单的功能。在保存表单之前，我们经常需要检查表单的必填项。检查通过后，我们发送一个保存表单数据的请求。
但是，如果此表单是动态的，则可以添加相同的表单。例如，这个表单有需要检查的输入框和下拉框。单击“添加表单”按钮，然后添加一个相同的表单。同样，对应于这个新表单的输入框和下拉框也需要被选中。
本文记录了相应的代码编写思路。我们先来看看效果图：
效果图
代码思路
表单的主要数据要写成一个对象：model=ruleForm 。但是，既然是动态的，就一定是循环的。所以可以写成这样：ruleForm: {
//动态循环项数组
formItemArr: [
{
名称： ，
性别： ，
},
],
},
当你点击添加表格的时候，直接推送对应的条目就可以了，就是这样：//添加表格。
addForm() {
let itemObj={
名称： ，
性别： ，
};
this . rule form . formitemarr . push(itemObj)；
},
重点来了，因为是循环的，prop也会变成动态的。拼接索引，就变成了根据索引查找对应的检查项，即：prop= formitemar。索引。名称“”。在这种情况下，它变成：prop=formItemArr.0.name ，prop=formItemArr.1.name ，prop=formItemArr.2.name .这样可以照顾到每一项中每一个绑定的值，不会遗漏验证。
这个验证函数。$ refs [ruleform]。当内联编写验证规则时，可以触发validate ((val)={}。
El-表单-项目
Label= name
:prop= formItemArr。索引。名称
:规则={
必填：真，
消息：“请填写”，
触发器：“模糊”，
}
.
完整代码
演示的话可以直接复制粘贴。
模板
div class=box
El-button @ click= addForm size= mini type= primary plain
添加表格/el按钮
El-button @ click= save form size= mini type= primary plain
保存表格/el按钮
br /
br /
el格式
:model=ruleForm
ref=ruleForm
标签宽度= 100像素
class=formform
差异
class=formformItemClass
ruleForm.formItemArr中的v-for=(item，index
:key=index
El-表单-项目
Label= name
:prop= formItemArr。索引。名称
:规则={
必填：真，
消息：“请填写”，
触发器：“模糊”，
}
el输入
size=mini
v-model.trim=item.name
Placeholder=请填写
style=width: 200px
/el-input
/El-表单-项目
El-表单-项目
Label=性别
:prop= formItemArr。索引。性别
:规则={
必填：真，
消息：“请选择”，
触发器：“更改”，
}
El-选择
可清除的
size=mini
v-model=item.gender
Placeholder=请选择
El选项标签=男性值=男性/el选项
El选项标签=女性值=女性/el选项
/el-select
/El-表单-项目
/div
/el格式
/div
/模板
脚本
导出默认值{
data() {
返回{
规则形式：{
//动态循环项数组
formItemArr: [
{
名称： ,
性别： ,
},
],
},
};
},
方法：{
//添加一个表格
addForm() {
let itemObj={
名称： ,
性别： ,
};
这个。规则形式。formitemarr。push(itemObj)；
},
//保存表格
saveForm() {
这个refs[ruleForm].验证((val)={
if (val) {
console.log(符合要求，保存成功，这个。规则形式)；
}否则{
console.log(错误提交！);
返回错误的
}
});
},
},
};
/脚本
style lang=less 范围。方框{
宽度：100%;
身高：100%;
框大小：边框-框；
填充：24px。表单表单{
宽度：360像素。formformItemClass {
填充顶部：24px
边框：2px虚线# ccc
边距-底部：18px
}
}
}
/风格
到此这篇关于迭代中动态校验埃尔格式表单项的实践的文章就介绍到这了，更多相关五-用于埃尔表单表单项内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。