vue表单校验,根据某选项追加或去掉校验
这是自己随便写的小测试,包括字段名取得都乱七八糟,敬请谅解。需求根据状态这个下拉框数据来判断经办人和日期是否需要校验,状态值为在职时校验,状态值为离职时不校验。实现代码1.表单 (正常校验处理)<el-form :model="editForm" label-width="115px" :rules="editFormRules" :disabled="editForm...
·
这是自己随便写的小测试,包括字段名取得都乱七八糟,敬请谅解。
需求
根据状态这个下拉框数据来判断经办人和日期是否需要校验,
状态值为在职时校验, 状态值为离职时不校验。
实现代码
1.表单 (正常校验处理)
<el-form :model="editForm" label-width="115px" :rules="editFormRules" :disabled="editFormAble" ref="editForm"
size="small">
<el-col :span="12">
<el-form-item label="状态" prop="value1">
<el-select v-model="editForm.value1" @change="stateChange" size="mini" style='width:100%'>
<el-option v-for="item in stateOpt" :key="item.code" :label="item.name" :value="item.code">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="申请单位" prop="value2">
<el-input v-model="editForm.value2" size='mini'></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="申请人" prop="value3">
<el-input v-model="editForm.value3" size='mini'></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="经办人" prop="value4">
<el-input v-model="editForm.value4" size='mini'></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="申请日期" prop="value5">
<el-date-picker v-model="editForm.value5" type="date" size="mini" format="yyyy-MM-dd"
value-format="timestamp"></el-date-picker>
</el-form-item>
</el-col>
</el-form>
- data中 (正常校验处理)
editFormRules: {
value1:[ {
required: true, //默认是否显示校验
message: '请填写value2',
trigger: 'blur'
}],
value2:[ {
required: true,
message: '请填写value2',
trigger: 'blur'
}],
value3:[{
required: true,
message: '请填写value3',
trigger: 'blur'
}],
value4:[{
required: false,
message: '请填写value4',
trigger: 'blur'
}],
value5:[{
required: false,
message: '请填写value5',
trigger: 'blur'
}]
},
3.methods【关键】
if(this.editForm.value1=="01"){
this.editFormRules.value4[0].required = true; //关键-将 required 改成true则校验,false 为不校验。
this.editFormRules.value5[0].required = true;
}else{
this.editFormRules.value4[0].required = false;
this.editFormRules.value5[0].required = false;
}
更多推荐
已为社区贡献5条内容
所有评论(0)