|
ElementUI 表单单个验证
今日在工作遇到一个问题,需求是这样的,总共有12个字段,其中第四个字段如果填写了,第五个,第六个和第七个就非必填,如果第五个,第六个第七个填了,第四个就非必填
实例图
如果区域选择的是北京,则只要填写前三项就可以, 如果区域选择的是上海或者不选,则校验的是全部 如下图 
解决方法
方案一 简单粗暴,好实现,技术含量低 直接将表单按字段拆分开,分成两个或者三个的表单,根据条件,校验需要的表单. 方案二 elementUI官方在表单校验文档中已经说明,取消单个校验的方法 结合这个方法使用Promise.all校验,如果最后的数量为0则表示校验通过 ElementUI官网地址  代码如下
-
立即创建
重置
export default {
data() {
return {
ruleForm: {
name: "",
region: "",
date1: "",
date2: "",
delivery: false,
type: [],
resource: "",
desc: ""
},
rules: {
name: [
{ required: true, message: "请输入活动名称", trigger: "blur" },
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
],
region: [
{ required: true, message: "请选择活动区域", trigger: "change" }
],
date1: [
{
type: "date",
required: true,
message: "请选择日期",
trigger: "change"
}
],
date2: [
{
type: "date",
required: true,
message: "请选择时间",
trigger: "change"
}
],
type: [
{
type: "array",
required: true,
message: "请至少选择一个活动性质",
trigger: "change"
}
],
resource: [
{ required: true, message: "请选择活动资源", trigger: "change" }
],
desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }]
}
};
},
watch: {
"ruleForm.region"(val) {
// 如果从上海切换到北京,移除之前的校验
if (val === "北京") {
this.$refs["ruleForm"].clearValidate("type");
this.$refs["ruleForm"].clearValidate("resource");
this.$refs["ruleForm"].clearValidate("desc");
}
}
},
methods: {
submitForm(formName) {
let _this = this;
// 如果活动区域选择和上海则全部校验,否则只校验前三个
let vaitalArr = ["name", "region", "date1", "date2", "delivery"];
if (this.ruleForm.region === "上海" || this.ruleForm.region === '' ) {
let str = ["type", "resource", "desc"];
vaitalArr = vaitalArr.concat(str);
}
Promise.all(
vaitalArr.map(item => {
const p = new Promise((resolve, reject) => {
_this.$refs.ruleForm.validateField(item, vaild => {
resolve(vaild);
});
});
return p;
})
).then(results => {
// 表单校验通过
results = results.filter(item => item);
if (!results.length) {
alert("校验通过");
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
};
|