表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分:表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
最近在项目中遇到了一个需求，需要动态增减表单元素，同时给新增的表单元素增加校验规则。
element-ui官网给出了解决方案：点击新增按钮时，向循环渲染的数组中push新的对象，数据驱动视图，通过增加数据的方式来增加新的dom元素；同样的，通过删除循环遍历的数据来达到删除dom的效果。
但是，校验规则不起作用，即使填写了表单已经提示未填写。在仔细检查后发现，element-ui的表单校验规则中，el-form-item绑定的prop必须和该item下的表单元素绑定的v-model值的名称一致。但和通常表单不同的是，该表单是动态增减的，对应el-form-item需要绑定的prop值必须带上遍历的索引值index:
<el-formref="...":model="test">
<divv-for="(item,index)intest.line":key="index">
<el-form-item:prop="'line.'+index+'.value1'":rules="{...}">
<el-inputv-model="item.value1"></el-input>
</el-form-item>
<el-form-item:prop="'line.'+index+'.value2'":rules="{...}">
<el-inputv-model="item.value2"></el-input>
</el-form-item>
<div>
</el-form>
<script>
exportdefault{
data(){
return{
test:{
...,
line:[{
value1:'',
value2:''
}]
}
}
}
}
</script>
表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
