标题描述看起来有些复杂,有vue,元素,又有表单验证,还有v代表循环?是不是有点乱?不过我相信开发中遇到过此问题的同学,一看就明白我说的意思了。
首先元素组件有一套完善的表单验证方法,官方文档写的也很清楚:元素表单验证API,正常按照官方文档添加规则规则,需要验证的表单项设置道具,然后提交表单时通过表单的验证方法验证表单项就可以了。
然鹅问题来了,如果表单项里有通过v代表动态生成的表单项,如何设置验证呢?这个官方文档并没有明确的说法,我们通过查找解决方案和实际验证,总结出来解决方法如下。
首先是循环表单项没有加验证之前的代码:
& lt; template>
& lt; div类=澳谌葜魈濉北?
& lt; el-form ref=靶问健?模型=靶问健?规则=肮嬖颉眑abel-width=?20 px”比;
& lt; el-row:地沟=" 10 "比;
& lt; el-col:跨度=" 12 ":抵消=" 0 "比;
& lt; el-form-item label="套餐名称:“道具=" activityName " id=癮ctivityName”比;
& lt; el-input v模型=" form.activityName "祝辞& lt;/el-input>
& lt;/el-form-item>
& lt;/el-col>
& lt;/el-row>
& lt; el-row:地沟=" 10 "比;
& lt; el-col:跨度=" 12 "比;
& lt; el-form-item label="状态:“比;
& lt; el-radio v模型="的形式。状态”的标签=" 1 "在上线& lt;/el-radio>
& lt; el-radio v模型="的形式。状态”的标签=" 0 "祝辞下线& lt;/el-radio>
& lt;/el-form-item>
& lt;/el-col>
& lt;/el-row>
& lt; el-row:地沟=" 10 "比;
& lt; el-col:跨度=?”比;
& lt; div类=白帜弧痹谔荻壬柚?& lt;/div>
& lt;/el-col>
& lt; el-col:跨度=" 20 "比;
& lt; el-row:地沟=" 10 " v="(项目、索引)的形式。productGroup”:关键="指数"比;
& lt; el-col:跨度=?”比;
& lt; el-form-item标签="商品数量:“比;
& lt; el-input v模型="项目。num " type=" "大?"小”祝辞& lt;/el-input>
& lt;/el-form-item>
& lt;/el-col>
& lt; el-col:跨度=?”比;
& lt; el-form-item label="优惠价格:“比;
& lt; el-input v模型="项目。价格”type="数量"大?"小”祝辞& lt;/el-input>
& lt;/el-form-item>
& lt;/el-col>
& lt; el-col:跨度=" 4 "比;
& lt;我类=癳l-icon-remove-outline @click”=癲eleteLadder(指数)”祝辞& lt;/i>,,,,
& lt;我类=" el-icon-circle-plus-outline " @click=癮ddLadder”v=爸甘?=0”祝辞& lt;/i>
& lt;/el-col>
& lt;/el-row>
& lt;/el-col>
& lt;/el-row>
& lt; el-form-item大?敖橹省眂lass=癲iv-submit”比;
& lt; el-button @click=" resetForm(“形式”)“在取消& lt;/el-button>
& lt; el-button类型=爸鳌盄click=皊ubmitForm(‘形式’)”在提交& lt;/el-button>
& lt;/el-form-item>
& lt;/el-form>
& lt;/div>
& lt;/template>
& lt; script>/* eslint-disable */出口默认{
数据(){
返回{
形式:{
activityName:”,
状态:' 1 ',
productGroup: [{num:“”,价格:"})
},
规则:{
activityName:(
{要求:真实、消息:“请输入套餐名称”,触发:“模糊”}
]
}
}
},
方法:{
deleteLadder(索引)
{
如果(this.form.productGroup.length> 1) {
this.form.productGroup.splice(指数(1);
}
},
addLadder ()
{
this.form.productGroup.push ({num:“”,价格:"});
},
submitForm (formName)
{
console.log (“activityName…”, this.form.activityName);
美元。参考文献[formName] . validate((有效,obj)=比;{
如果(有效){
this.submitFormAction ();
其他}{
message.error美元。(“验证不通过”);
}
});
},
submitFormAction ()
{
message.success美元。(“提交成功”);
},
resetForm (formName)
{
美元。参考文献[formName] .resetFields ();
this.form。productGroup=[{num:“”,价格:"});
}
}
}
& lt;/script>
& lt; style>
.el-form-item {
margin-bottom: 20 px;
}
& lt;/style>
之前
首先是添加规则规则,这个和正常添加规则一样:
productGroupRules: {
productGroupNum:[{要求:真的,信息:“请填写商品数量”,触发:‘模糊’}),
productGroupPrice:[{要求:真的,信息:“请填写优惠价格”,触发:‘模糊’}]
}
之前
然后给表单项添加验证,以商品数量为例:
