背景描述:
表单如下图所示:
如上图所示,我们有一个动态表单(教育经历) - 可以动态添加的,我们的校验规则是:
如果不填写公司名称,那么所有字段非必填,如果填写了公司名称那么当前item的公司职务等必填
DOM结构:
<el-row> <el-form-item :rules="workListRule.last_company_name" :prop="'dc_talent_work_list.' + idx + '.last_company_name'"> <template slot="label"> <span>公司名称</span> <div style="color:#ccc;line-height:20px;font-size:12px;margin-bottom:8px;padding-left:10px;"> <div>1、如有工作经历,请如实填写</div> <div>2、并需完整填写每个字段信息(公司名称+部门+职务+开始时间+结束时间),否则会造成信息无法录入的情况。</div> <div>3、公司名称需填写公司中文或英文全称</div> </div> </template> <el-input v-model="item.last_company_name" placeholder="请输入"></el-input> </el-form-item> </el-row> <el-row> <el-form-item label="所在部门" :rules="workListRule.last_company_unit" :prop="'dc_talent_work_list.' + idx + '.last_company_unit'" > <el-input v-model="item.last_company_unit" placeholder="请输入"></el-input> </el-form-item> </el-row>
JavaScript:
var validateLastCompanyName = (rule, value, callback) => { callback(); }; var validateLastCompanyUnit = (rule, value, callback) => { // "dc_talent_work_list.0.last_company_unit" let thisField = rule.field.split(".")[1]; if(this.form.dc_talent_work_list[thisField].last_company_name != '' && value==""){ callback(new Error("公司部门不能为空")); } callback(); };
// 工作经历校验规则 workListRule:{ last_company_name: { validator: validateLastCompanyName,trigger: "blur"}, last_company_unit: { validator: validateLastCompanyUnit,trigger: "blur"}, }
主要依据:
prop属性根据当前数组下标 idx 动态,
判定当前在第几个工作经历的idx通过形参 rule 字符串截取获取 (自己找到的,文档没有)