vue2动态表单验证与表单多层嵌套验证
普通表单验证单项依靠的是prop…而动态生成的表单要用:prop。注意v-for,要将。
·
vue2动态表单验证与表单多层嵌套验证
1、动态验证表单
普通表单验证单项依靠的是prop…而动态生成的表单要用:prop。
动态验证表单的prop属性的格式::prop="‘v-for绑定的数组.’ + index + ‘.v-model绑定的变量’
;
注意v-for,要将表单的model名
写进去
<el-form
ref="form"
:model="form"
:rules="rules"
label-position="right"
label-width="auto"
size="small"
style="margin: 20px auto"
>
<div
v-for="(item, index) in form.device.properities"
:key="index"
class="text"
>
<el-col :lg="7" :md="10" :sm="12" :xl="6" :xs="12">
<el-form-item
:label="item.name"
:prop="'device.properities.' + index + '.value'"
:rules="[
{
type: item.type,
required: item.force,
validator: validatorFactror,
trigger: 'blur',
},
]"
>
<el-input v-model="item.value" type="text" />
</el-form-item>
</el-col>
</div>
<el-form-item style="margin-top: 20px">
<div>
<el-button
type="primary"
@click.stop="addIotDevMethod('form')"
>保 存
</el-button>
</div>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
form: {
device:{
properities:[]
}
};
},
},
method:{
//验证用户输入的格式
validatorFactror(rule, value, callback) {
const ipReg =
/^(\d{1}|[1-9][0-9]|1\d\d|2[0-4]\d|25[0-5])\.(\d{1}|[1-9][0-9]|1\d\d|2[0-4]\d|25[0-5])\.(\d{1}|[1-9][0-9]|1\d\d|2[0-4]\d|25[0-5])\.(\d{1}|[1-9][0-9]|1\d\d|2[0-4]\d|25[0-5])$/;
if (value) {
switch (rule.type) {
case "ip_addr":
if (!ipReg.test(value)) {
callback(new Error("IP地址不合法"));
} else {
callback();
}
break;
default:
callback();
break;
}
} else {
callback();
}
},
//提交表单时
addIotDevMethod(formName) {
this.$refs[formName].validate((valid) => {
console.log(valid);
//提交表单前验证表单必填项是否都填写,如果都填写,valid返回true,可以提交表单
if (valid) {
//此处编写表单验证通过的业务逻辑
}
});
},
}
};
</script>
2、表单多层嵌套验证
<el-form
:model="form"
:rules="rules"
label-width="100px"
size="mini"
ref="form"
>
<el-form-item label="标准标题" prop="title">
<el-input v-model="form.title" autocomplete="off"> </el-input>
</el-form-item>
<div
v-for="(item, index) in form.items"
:key="index"
style="display: flex; align-items: center; margin-bottom: 10px"
>
<el-card style="flex: 1" :body-style="{ padding: '10px' }">
<el-form-item
label="项目标题"
prop="title"
:rules="getRule(item.title, rules.oneRules.title)"
>
<el-input v-model="item.title" autocomplete="off"> </el-input>
</el-form-item>
<div
v-for="(ele, num) in item.options"
:key="num"
style="
display: flex;
align-items: center;
margin-bottom: 10px;
"
>
<el-card style="flex: 1" :body-style="{ padding: '10px' }">
<el-form-item
label="内容"
prop="content"
:rules="
getRule(ele.content, rules.oneRules.twoRules.content)
"
>
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 4 }"
v-model="ele.content"
autocomplete="off"
>
</el-input>
</el-form-item>
<div>
<div
v-for="(element, idx) in ele.options"
:key="idx"
style="display: flex"
>
<el-form-item
style="flex: 1"
prop="value"
:rules="
getRule(
element.value,
rules.oneRules.twoRules.threeRules.value
)
"
>
<el-input v-model="element.value"> </el-input>
</el-form-item>
</div>
</div>
</el-card>
</div>
</el-card>
</div>
</el-form>
form: {
title: "",
items: [
{
title: "",
options: [
{
content: "",
options: [
{
key: "",
value: "",
},
],
},
],
},
],
},
rules: {
title: [
{
required: true,
message: "标题不能为空",
trigger: ["blur", "change"],
},
],
oneRules: {
title: "项目标题不能为空",
twoRules: {
content: "内容不能为空",
threeRules: {
value: "不能为空",
},
},
},
},
getRule(value, msg) {
return {
required: true,
validator: (rule, v, callback) => {
if (value === null || value === "") {
callback(new Error(msg));
}
callback();
},
trigger: ["change", "blur"],
};
},
更多推荐
已为社区贡献3条内容
所有评论(0)