如图:
有必填的部分还有选填的部分,同时要满足正则校验,以及是否只选了一项的判断
<template>
<div class="home">
<p style="color:red">{{tip}}</p>
<p>任意选择一项</p>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活动名称2" prop="name2">
<el-input v-model="ruleForm.name2"></el-input>
</el-form-item>
<el-form-item label="活动名称3" prop="name3">
<el-input v-model="ruleForm.name3"></el-input>
</el-form-item>
<el-form-item label="活动名称4" prop="obj.name4">
<el-input v-model="ruleForm.obj.name4"></el-input>
</el-form-item>
<el-form-item label="活动名称5" prop="obj.name5">
<el-input v-model="ruleForm.obj.name5"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
<div>{{ruleForm}}</div>
<div>{{res}}</div>
</div>
</template>
<script>
export default {
data() {
return {
ruleForm: {
name: "",
name2: "",
name3: "",
obj: {
name4: "",
name5: "",
},
},
tip: "",
rules: {
name: [
{ message: "请输入活动名称", trigger: "blur", required: true },
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
],
name2: [
{ message: "请输入活动名称", trigger: "blur", required: true },
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
],
name3: [
{ message: "请输入活动名称", trigger: "blur", required: true },
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
],
"obj.name4": [
{ message: "请输入活动名称", trigger: "blur" },
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
],
"obj.name5": [
{ message: "请输入活动名称", trigger: "blur" },
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
],
},
res: "",
};
},
created() {},
computed: {},
methods: {
submitForm(formName) {
let nocontent = [];
Object.keys(this.ruleForm.obj).forEach((key) => {
console.log(key, this.ruleForm.obj[key]);
if (this.ruleForm.obj[key] != "") {
//没有填
nocontent.push(key);
}
});
this.$refs[formName].validate((valid) => {
if (valid) {
console.log("00000");
console.log(nocontent, "nocontent");
if (nocontent.length != 1) {
this.tip = "请任意选择一项";
return false;
} else {
this.tip = "";
}
this.res = "创建成功!";
} else {
console.log("error submit!!");
console.log("111111");
if (nocontent.length != 1) {
this.tip = "请任意选择一项";
return false;
} else {
this.tip = "";
}
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
this.tip = "";
},
},
watch: {},
};
</script>
<style scoped>
.home {
width: 800px;
display: flex;
height: 800px;
justify-content: space-between;
}
.line {
width: 1px;
height: 100%;
background: #ccc;
}
.left-box {
display: flex;
align-items: center;
flex-direction: column;
}
</style>