一、数据如下
ecsEditForm: {
ecsEditData: [
{
label: '实例编码',
key: 'instanceCode',
value: '',
attrFrameType: 'input',
regValue: "(?=.*[a-z])(?=.*\\d)(?=.*[-_])[a-z\\d-_]{2,50}",
attrValueDefault: "请输入2-50位，可输入英文+数字和特殊符号“-”“_”"
},
{
label: '资源ID',
key: 'resourceId',
value: '',
attrFrameType: 'input',
attrValueDefault: "请输入2-50位，可输入英文+数字和特殊符号“-”“_”",
regValue: "(?=.*[a-z])(?=.*\\d)(?=.*[-_])[a-z\\d-_]{2,50}"
},
]
},
二、渲染如下
<Form :model="ecsEditForm" ref="ecsEditForm" class="formValidate" label-position="left">
<p v-for="(item, index) in ecsEditForm.ecsEditData" :key="index">
<!-- 可以在 rules 对象中进行传参，如我们这里需要的正则 item.regValue -->
<FormItem :prop="'ecsEditData.' + index + '.value'" :label="item.label"
:rules="{required: true,validator: requiredValid, reg: item.regValue, msg: item.attrValueDefault,trigger: 'blur'}">
<Input v-if="['input'].includes(item.attrFrameType)" v-model="item.value" style="width:120px;" />
</FormItem>
</p>
</Form>
methods: {
requiredValid (rule, value, callback) {
let length = 0;
// 对象数组判断
if (value instanceof Object) {
length = Object.keys(value).length
}
// 字符串的判断
else if (typeof value === 'string') {
length = value.trim().length
}
// 数字判断
else {
length = 1
}
// 必填检验
if (length === 0) {
callback(new Error(rule.msg))
}
let regString = rule.reg;
if (regString) {
let reg = new RegExp(regString)
if (!reg.test(value)) {
callback(new Error(rule.msg))
} else {
callback()
}
}
callback()
},
}
注意项：
- data 中 ecsEditData 要放在 ecsEditForm中， 并且 <Form> 标签 中 model 的传值 要 相同，也为 ecsEditForm
- <Form> 标签 要添加 ref="ecsEditForm"
- <FormItem> 中的 prop 如上所示，通过 索引值（:prop="'ecsEditData.' + index + '.value'"）来赋值
- 行内校验需在 <FormItem> 里的 rules 对象中 添加 validator: requiredValid
